2024年大二上学习日记9.7-9.8（vue2完结撒花）

9.7

1,学习vuex模块化和namespaced的使用

为了使模块化看起来结构更加清晰，可以将求和的相关配置和人员的相关配置单独写成一个js文件，再在index.js文件中引入这两个文件，作为两个不同的模块进行使用

在index.js文件中：

在count.js文件中：

在person.js文件中：

给服务器发送请求获取数据：

2.学习路由的基本概念

前端路由中的路径相当于key,组件相当于value,路由由router统一管理

前端中的路由是用于单页面应用中的导航区和展示区的来回切换

3.学习路由的基本使用

安装vue-router,vue2的项目需要用vue-router3

在src目录下创建一个名为route的文件夹，文件夹下新建一个index.js文件用于创建整个应用的路由器。

Router-link标签在解析时会自动转换为a标签

4.学习嵌套（多级）路由

5.学习路由的query参数

在message组件中：

要对to进行数据绑定

字符串写法要使用模版字符串

在detail组件中：

6.学习命名路由

7.学习路由的params参数

8.学习路由的props配置

第一种写法比较少用，因为数据被写死了

将params参数中的id和title以props的形式传递给detail组件

第三种写法采用结构赋值的写法，写的会更简洁（不过结构赋值还没学）

9.学习router-link的replace属性

9.8

1.学习编程式路由导航

中间出现了一个小插曲，突然出现报错：Module not found: Error: Can't resolve 'core-js/fn/symbol' i，于是用yarn add core-js@2安装了插件，结果冒出了59个errors,吓得我一脸懵，连忙用yarn remove core-js@2卸载插件，我明明在package.json文件中的dependencies看到了core-js的配置，但是却报错说core-js不存在，我又尝试用 yarn remove core-js卸载，好巧不巧成功了。

以下是package.json文件中显示我们自行安装的插件的名称及版本。

Go的参数是正数就前进，是负数则后退，eg：go(3)代表前进3步

2.学习缓存路由组件

注意：keep-alive 应该包裹展示的路由组件，如News组件是在Home组件中展示的。

如果不加include，则默认所有在router-view位置展示的组件都被缓存。

3.学习两个新的生命周期钩子，是路由组件特有的

在New组件中

4.学习全局前置路由守卫

在router下的index.js修改

用meta配置进行优化：meta是路由元信息

只给需要鉴别权限的组件的路由规则加上meta配置

5.学习全局后置路由守卫

没有next()

实现了点击About，页签名改为‘关于’

6、学习独享路由守卫（只有前置）

提供给某个单独的路由使用

7、学习组件内路由守卫

以下是在About组件中进行演示

进入守卫：

离开守卫：

注意与全局守卫的前置守卫和后置守卫进行区分

8.学习history（/）模式和hash（/#/）模式

用yarn run build 将前端文件打包成dist文件夹

需要将dist文件夹中的静态资源部署到服务器上（前端静态资源指的是html，css，js文件）

于是拓展了搭建一个简单服务器的方法

使用node.js中的express框架

新建一个demo文件夹，用vscode打开，输入以下命令

将路由器的工作模式改为history,重新打包

重新部署到服务器上，一刷新就出现了404报错

需要后端人员配合解决

用node.js解决的办法是在服务器上安装 connect-history-api-fallback插件

使用插件

成功解决了404问题

还提及了nginx,没学

9.学习element-ui组件库基本使用

Element-ui的官网地址：Element - The world's most popular Vue UI framework

安装element-ui组件库

10.学习element-ui组件库的按需引入

提及要区分好开发依赖和生产依赖（webpack的相关知识）

按照官方文档中的快速上手的指引进行按需引入

在babel.config.js文件中改配置

在main.js中按需引入组件，还可以自己改组件名

运行时发生报错：

解决方法：按最新版修改babel.config.js文件中的配置

还推荐了一个蚂蚁金服写的组件库：Ant Design Vue

建议闲着没事可以多看看组件库有什么组件，方便使用时进行查找

终于把vue2过了一遍（累）

最后突发感想:暑假不努力，开学加把劲。

为了使模块化看起来结构更加清晰，可以将求和的相关配置和人员的相关配置单独写成一个js文件，再在index.js文件中引入这两个文件，作为两个不同的模块进行使用

在index.js文件中：

在count.js文件中：

在person.js文件中：

给服务器发送请求获取数据：

2.学习路由的基本概念

前端路由中的路径相当于key,组件相当于value,路由由router统一管理

前端中的路由是用于单页面应用中的导航区和展示区的来回切换

3.学习路由的基本使用

安装vue-router,vue2的项目需要用vue-router3

在src目录下创建一个名为route的文件夹，文件夹下新建一个index.js文件用于创建整个应用的路由器。

Router-link标签在解析时会自动转换为a标签

4.学习嵌套（多级）路由

5.学习路由的query参数

在message组件中：

要对to进行数据绑定

字符串写法要使用模版字符串

在detail组件中：

6.学习命名路由

7.学习路由的params参数

8.学习路由的props配置

第一种写法比较少用，因为数据被写死了

将params参数中的id和title以props的形式传递给detail组件

第三种写法采用结构赋值的写法，写的会更简洁（不过结构赋值还没学）

9.学习router-link的replace属性

9.8

1.学习编程式路由导航

中间出现了一个小插曲，突然出现报错：Module not found: Error: Can't resolve 'core-js/fn/symbol' i，于是用yarn add core-js@2安装了插件，结果冒出了59个errors,吓得我一脸懵，连忙用yarn remove core-js@2卸载插件，我明明在package.json文件中的dependencies看到了core-js的配置，但是却报错说core-js不存在，我又尝试用 yarn remove core-js卸载，好巧不巧成功了。

以下是package.json文件中显示我们自行安装的插件的名称及版本。

Go的参数是正数就前进，是负数则后退，eg：go(3)代表前进3步

2.学习缓存路由组件

注意：keep-alive 应该包裹展示的路由组件，如News组件是在Home组件中展示的。

如果不加include，则默认所有在router-view位置展示的组件都被缓存。

3.学习两个新的生命周期钩子，是路由组件特有的

在New组件中

4.学习全局前置路由守卫

在router下的index.js修改

用meta配置进行优化：meta是路由元信息

只给需要鉴别权限的组件的路由规则加上meta配置

5.学习全局后置路由守卫

没有next()

实现了点击About，页签名改为‘关于’

6、学习独享路由守卫（只有前置）

提供给某个单独的路由使用

7、学习组件内路由守卫

以下是在About组件中进行演示

进入守卫：

离开守卫：

注意与全局守卫的前置守卫和后置守卫进行区分

8.学习history（/）模式和hash（/#/）模式

用yarn run build 将前端文件打包成dist文件夹

需要将dist文件夹中的静态资源部署到服务器上（前端静态资源指的是html，css，js文件）

于是拓展了搭建一个简单服务器的方法

使用node.js中的express框架

新建一个demo文件夹，用vscode打开，输入以下命令

将路由器的工作模式改为history,重新打包

重新部署到服务器上，一刷新就出现了404报错

需要后端人员配合解决

用node.js解决的办法是在服务器上安装 connect-history-api-fallback插件

使用插件

成功解决了404问题

还提及了nginx,没学

9.学习element-ui组件库基本使用

Element-ui的官网地址：Element - The world's most popular Vue UI framework

安装element-ui组件库

10.学习element-ui组件库的按需引入

提及要区分好开发依赖和生产依赖（webpack的相关知识）

按照官方文档中的快速上手的指引进行按需引入

在babel.config.js文件中改配置

在main.js中按需引入组件，还可以自己改组件名

运行时发生报错：

解决方法：按最新版修改babel.config.js文件中的配置

还推荐了一个蚂蚁金服写的组件库：Ant Design Vue

建议闲着没事可以多看看组件库有什么组件，方便使用时进行查找

终于把vue2过了一遍（累）

最后突发感想:暑假不努力，开学加把劲。