尚硅谷Vue系列教程学习笔记（14）
尚硅谷Vue系列教程学习笔记（14）
- 参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
- 参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
- 笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。
- 详细代码案例请移步本人gitee仓库： vue_basic案例代码实现
- Vue-cli脚手架实现案例代码见仓库：vue01
目录
-
- 尚硅谷Vue系列教程学习笔记（14）
-
-
- 131-独享路由守卫
- 132-组件内路由守卫
- 133-history模式和hash模式
- 134-element-ui的基本使用
- 135-element-UI组件按需引入
- 136-Vue3的基本使用
- 137-创建Vue3-CLI脚手架项目
- 138-使用vite创建工程
- 139-分析Vue3的工程结构
- 140-Vue3开发者工具的安装（略）
-
131-独享路由守卫
给每个组件添加路由守卫的案例代码：
//在store/index.js中的代码
//配置路径：key:value的对应关系
const routes = [
{
path: '/about',
name: "about",
component: About,
meta: {
title: "关于"
}
},
{
name: "home",
path: '/home',
component: Home,
meta: {
title: "主页"
},
children: [
{
name: "message",
path: "message",
component: Message,
meta: {//设置需要权限校验属性
isAuth: true,
title: "消息列表"
},
//设置独享路由守卫，由一个组件独享
beforeEnter: (to, from, next) => {
console.log("前置路由守卫被调用...", to, from)
//实现网页title随着组件切换改变，需要在上述的每个路由中添加路由元数据meta中进行添加
//增加判断逻辑
if (to.meta.isAuth) {//判断是否需要权限校验
alert("对不起，您当前无权限！")
} else {
next()
}
//调用next函数，表示处理过上述逻辑之后，继续往下走
// next()
},
children: [
{
name: "detail",
path: "detail",
component: MessageDetail,
meta: {
isAuth: true,
title: "消息详情"
}
//设置props属性接受传来的值，第一种一般的props写法
// props: {
// id: 1,
// title: '测试',
// content: '内容'
// }
// //第二种props写法
// props: true//表示该路由组件接受到的params参数以props的形式传递给该组件，在该组件中使用props属性接受即可
// props($route) {
// return {
// id: $route.params.id,
// title: $route.params.title,
// content: $route.params.content
// }
// }
}
]
},
{
name: "news",
path: "news",
component: News,
meta: {//设置需要权限校验属性
isAuth: true,
title: "新闻列表"
},
beforeEnter: (to, from, next) => {
console.log("前置路由守卫被调用...", to, from)
//实现网页title随着组件切换改变，需要在上述的每个路由中添加路由元数据meta中进行添加
//增加判断逻辑
if (to.meta.isAuth) {//判断是否需要权限校验
alert("对不起，您当前无权限！")
} else {
next()
}
//调用next函数，表示处理过上述逻辑之后，继续往下走
// next()
},
}
]
},
]
重点：独享路由守卫只有前置没有后置。
132-组件内路由守卫
作用：如果该组件有独有的逻辑需要在进入或离开时进行处理，那么就可以使用组件内路由守卫。
案例实现代码：
我是About的内容
133-history模式和hash模式
路由器的两种工作模式：history模式和hash模式。
重点：路径里面从#开始之后的所有值都算作为路由中的hash值，所有的hash值不会随着请求发送给服务器的。
两种模式下路径的区别：
使用hash模式之后，路径中会出现：/#/
使用history之后，路径中很干净只有：/
项目上线之前需要对编写的页面进行打包，之后才可以上线部署运行。
重点：Vue3项目中使用route/index.js中添加属性mode更改路由器默认工作模式的示例代码如下：
//创建路由器对象
const router = createRouter({
//配置路由模式为hash模式
history: createWebHashHistory(),
//配置路由模式为history模式
history: createWebHistory(),
routes
})
重点：使用build指令对编写好的项目进行打包案例代码的步骤：
1.在命令行运行：npm run build即可，执行时间取决于项目大小（注意：Vue只看src文件夹下有什么，就打包什么，打包出来的文件需要在服务器上进行部署才可以展现）；
2.然后在项目中出现了一个dist文件夹；
3.项目上线之前需要创建一个微型的服务器，创建服务器的步骤如下：
（1）在桌面创建一个demo文件夹，然后用vscode打开，然后在命令行写入：npm init，除了服务器名字自定义之外，其他的一路回车即可，完成项目初始化；
（2）然后，在命令行里面安装express，使用命令：npm i express；
（3）然后在demo项目中创建一个sever.js文件，其中写入代码为：
```
const express = require(‘express’)
const app = express()
//配置服务器响应get请求
app.get(‘/person’, (req, res) => {
//返回数据配置
res.send({
name: ‘wyy’,
age:22
})
})
app.listen(5005, (err) => {
if(!err) console.log(“服务器启动成功…”)
})
```
（4）然后在命令行直接运行node server启动服务器成功；
4.然后在demo项目中创建一个static文件夹，其中存放一些静态资源文件，这里来自于使用npm run build打包的使用Vue-cli打包之后的dist文件夹里面的文件。
5.然后在server.js文件中写入如下代码，目的是为让服务器识别static文件夹下面的静态资源：
const app = express()
//让服务器使用静态资源
app.use(express.static(__dirname+'/static'))
6.同时为了解决使用路由模式为history时出现的刷新页面请求时出现的404问题，还需要在server.js中引入如下代码：
const history = require('connect-history-api-fallback')
//注意需要在解析static之前使用
//在使用静态资源之前使用上述的connect-history-api-fallback
app.use(history())
7.完成项目的简单部署。
134-element-ui的基本使用
Vue中组件分为两大类：
1.移动端UI组件：Vant/Cube UI/Mint UI等；
2.PC端UI组件：element-UI/IView UI等；
注意：使用开源UI组件需要项目不那么定制化实现，如果项目定制化实现，那么不推荐使用开源的UI组件。
注意：一些典型的管理系统适合使用开源UI组件。
在项目中使用element-ui组件的案例代码，在App.vue组件中：
注意：上述直接在main.js中引入所有的css文件和组件对前端项目是非常不友好的，因为会造成很多的代码冗余，且项目体积过大。
135-element-UI组件按需引入
Vue3中配置如下：
1.首先安装两个依赖：npm install -D unplugin-vue-components unplugin-auto-import；
2.然后，在项目的vue.config.js文件中写入如下代码：
const { defineConfig } = require('@vue/cli-service')
//按需引入element-ui组件
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
transpileDependencies: true,
// 和webpapck属性完全一致，最后会进行合并
configureWebpack: {
//配置webpack自动按需引入element-plus，
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
}
})
3.在App.vue组件中使用案例代码如下：
//待定，查了很多资料，但是仍然没有找到合适的解决方案（使用js语言）
...
136-Vue3的基本使用
重点：webpack支持Tree Shaking，来消除js中多余的没有用的代码。
Vue3中更好的与ts进行结合；
新特性：
1.组合API；
2.新的内置组件；
3.其它改变（例如：新的生命周期钩子等）；
…
137-创建Vue3-CLI脚手架项目
使用如下代码判断Vue版本是否在4.5.0及以上：
vue --version
//或使用
vue -V
138-使用vite创建工程
现在使用的创建前端项目的工具为webpack。
重点：vite是新一代的创建前端项目的工具。
vite的优点：
1.vite中可快速打包，且快速冷启动；
2.轻量快速的热重载；
3.真正地按需编译，不再等待整个应用编译完成；
使用vite创建Vue3应用的步骤：
1.运行：npm init vite-app vue3_test_vite；
2.运行：cd vue3_test_vite；
3.运行：npm install；
4.运行：npm run dev；
5.访问服务器：http://localhost:3000
139-分析Vue3的工程结构
Vue3-CLI创建工程的结构分析：
1.main.js中变化：引入的不再是Vue构造函数了，而是一个createApp工厂函数来创建vm对象，实现代码如下：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
//上述代码中，使用createApp函数创建vue实例对象app，这里的app和vue2中的vm更轻（即：app中不像vm中包含很多的属性和方法）
2.Vue3中可以不在template中放入div等根标签；
140-Vue3开发者工具的安装（略）
//截止到2022.9.3日晚20：28