尚硅谷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

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()
                },
            }
        ]
    },
]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

重点：独享路由守卫只有前置没有后置。

132-组件内路由守卫

作用：如果该组件有独有的逻辑需要在进入或离开时进行处理，那么就可以使用组件内路由守卫。

案例实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

133-history模式和hash模式

路由器的两种工作模式：history模式和hash模式。

重点：路径里面从#开始之后的所有值都算作为路由中的hash值，所有的hash值不会随着请求发送给服务器的。

两种模式下路径的区别：
使用hash模式之后，路径中会出现：/#/
使用history之后，路径中很干净只有：/

项目上线之前需要对编写的页面进行打包，之后才可以上线部署运行。

重点：Vue3项目中使用route/index.js中添加属性mode更改路由器默认工作模式的示例代码如下：

//创建路由器对象
const router = createRouter({
    //配置路由模式为hash模式
    history: createWebHashHistory(),
    //配置路由模式为history模式
    history: createWebHistory(),
    routes
})


1
2
3
4
5
6
7
8
9
10
11

重点：使用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启动服务器成功；
1
2
3

4.然后在demo项目中创建一个static文件夹，其中存放一些静态资源文件，这里来自于使用npm run build打包的使用Vue-cli打包之后的dist文件夹里面的文件。

5.然后在server.js文件中写入如下代码，目的是为让服务器识别static文件夹下面的静态资源：

const app = express()

//让服务器使用静态资源
app.use(express.static(__dirname+'/static'))


1
2
3
4
5
6
7

6.同时为了解决使用路由模式为history时出现的刷新页面请求时出现的404问题，还需要在server.js中引入如下代码：

const history = require('connect-history-api-fallback')


//注意需要在解析static之前使用
//在使用静态资源之前使用上述的connect-history-api-fallback
app.use(history())

1
2
3
4
5
6
7
8

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组件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

注意：上述直接在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()]
      })
    ],
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.在App.vue组件中使用案例代码如下：

//待定，查了很多资料，但是仍然没有找到合适的解决方案（使用js语言）
...

1
2
3
4

136-Vue3的基本使用

重点：webpack支持Tree Shaking，来消除js中多余的没有用的代码。

Vue3中更好的与ts进行结合；

新特性：
1.组合API；
2.新的内置组件；
3.其它改变（例如：新的生命周期钩子等）；
…

137-创建Vue3-CLI脚手架项目

使用如下代码判断Vue版本是否在4.5.0及以上：

vue --version
//或使用
vue -V

1
2
3
4

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中包含很多的属性和方法）

1
2
3
4
5
6
7

2.Vue3中可以不在template中放入div等根标签；

140-Vue3开发者工具的安装（略）

//截止到2022.9.3日晚20：28