Vue项目学习提升

一、vue-router路由

1、项目包导入

vue-router是一个插件包，用来对页面跳转进行控制非常的方便，之前我们采用后端相应的方式进行页面的跳转，现在我们可以直接在前端进行控制页面的跳转

npm install vue-router --save-dev
初始化vue-router插件包

2、vueRouter包的使用

使用的方式非常类似Java包的使用方式，先导入包，然后申明使用，同理类似其他的项目依赖包的使用，先安装包(上面的那一步npm install…)，然后在项目中进行导入，最后申明使用，注意这些导入和申明使用都是在main.js中进行（全局的js运行控制）

3、版本问题注意

vue2对应的vue-router版本是3.0左右，而vue3对应的vue-router是4点几的版本，下面的版本是经过自己的测试是可以的。

vue2 可以选用的vue-router版本3.2.0
vue3 可以选用的vue-router版本4.0.16

4、标签介绍

router-link用来控制页面的跳转指向，而router-view用来控制页面内容的展示，这个需要自己的实际尝试，刚开始其实我并不是特别理解电脑但是经过我自己的实际尝试后我发现了其中的规律

5、路由的配置文件

注意的是，路由配置文件有点不怎么好理解，但是自己需要记住这种规则就行，同时在我们的main.js中要将router进行导入，并且实例化的时候需要进行添加（注意的是router中的index.js中已经进行过实例化了，这里我们只是进行添加）

路由名字这块目前可能还不是特别确定，暂时记住这种方式，反正定义router的只有这两个位置，导入时采用import VueRouter，传入变量时采用的是routes(路线），main.js中引用时采用的是router。这种东西没必要花时间太多去纠结！！

二、Element-UI优化前端页面显示

1、安装

#安装element-ui
npm i element-ui -S

#安装依赖
npm install

#安装 SASS 加载器
npm install sass-loader node-sass --save-dev

#启动项目测试
npm run dev

2、element-ui上寻找自己喜欢的样式

选择好自己喜欢的样式后复制代码到我们的项目上，同时在路由上进行配置我们的页面进行跳转就行了。