vue实际项目中遇到的问题及解决整理

梦里梦外; 2023-10-03 08:44 30阅读 0赞

**目录**

1. 克隆git项目后只有master分支问题

2. vue中封装公共方法，全局使用

3. git报错：You are in the middle of a merge -- cannot amend

4. 组件强制刷新

5. vue直接引用animate.css 动画不起作用问题

6. Vue在使用Echart时init初始化失败，获取不到DOM元素

7. vue的tab页切换与echart缩成一团问题

8. 没有加入git项目团队前拉代码，会导致无法推送到主分支。此时若已经加入团队，需要重新拉代码，把本地代码覆盖进去再上传代码

9. Vue：使用function函数改变v-if的标志时会导致无法更新视图

10. 前端的导入文件/上传文件接口注意事项

11. vue引入本地图片的特殊情况

16. vue-countupjs

17. 不同版本vue-cli区别

18. route用法

19. 项目配置：vue cli3.0项目如何在F12里定位css所在的vue文件及行数

20. ElementUI - image-viewer - 图片放大查看组件

21理解：不能在computed中改变页面变量的值，如果需要改变，请使用watch

22. el-dialog垂直居中问题

23. （vue-cli2）assest和static文件夹的区别（图片放在哪)assets->bundle(编译到一起)

24. IE兼容难题

25. 关于计时器无法清除问题

26. Vue状态管理

27. vue深拷贝、浅拷贝

28. el-date-picker组件的小注意点

29. 接口报错code的一般含义

30. el-table的show-overflow-tooltip功能因为写了template而失效问题

31. 两个合并型el-table同时横向滚动

32. el-table的expand扩展行功能的冗余问题

33 F12出现莫名的console问题

34. 树形控件动态赋值有可能出现渲染出错问题

35. el-input限制只能输数字，不能是负数并且限制最大或最小值

36. vscode快速创建多层子文件夹

37. 预编译stylus的使用stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数，富于表现力、动态的、健壮的 CSS

38. npm安装插件代码

39. el-select改变后视图不渲染问题

40. el-form校验失败问题

41. el-table第一列空出一段距离使其不贴边

42. 自定义动画@keyframes以及Animate.css的组合使用

43. vue在setTimeout内修改this失效的解决办法

44. Promise报错 Expected the Promise rejection reason to be an Error：

45. vue项目打包后，写的覆盖element的样式无效了

--------------------

#### 1. 克隆git项目后只有master分支问题 ####

--------------------

**问题：**

> git clone 项目后，默认clone该项目的master分支，但是最新代码不在该分支上并且git branch后本地也只存在master分支，该怎么办？

--------------------

**方法：**

#第一步：从远程服务器取回所有分支的更新数据(克隆项目后，
    如果其他用户后来新建了远程分支，这一步才是必要的)
    git pull #或者git fetch
    
    #第二步: 新建一个等会要与远程分支绑定的本地分支，并自动切换到该分支
    git checkout -b <分支名>
    
    #第三步：将新建的本地分支绑定到目标远程分支
    git branch --set-upstream-to=origin/<远程分支名>

--------------------

**解释**：

> 概念上分成远程分支和本地分支，`git branch`只查看本地分支；`git branch -r`可以查看远程分支。当克隆项目时，默认只把远程分支里的origin/master分支绑定到本地的master分支，但如果你想用其他远程分支，需要新建一个本地分支然后与其绑定

--------------------

####  ####

#### 2. vue中封装公共方法，全局使用 ####

--------------------

**2.1.src文件夹下新建util.js文件以便存放公共方法**

export default {
     rowspan: function (data) {
       var index = data;
       // 代码
       return index;
     }
    }

**2.2.main.js中,****将unils里的方法注册为全局方法：**

import utils from '@/util/util.js'
    
    Vue.prototype.utils = utils

**2.3.任意文件中使用**

mounted () {
     var index = this.utils.rowspan(1)
    }

--------------------

#### 3. git报错：`You are in the middle of a merge -- cannot amend` ####

--------------------

**解决方法：**

**`git reset --merge`**

注：取消合并

--------------------

####  ####

#### 4. 组件强制刷新 ####

--------------------

**场景：**

> 当组件动态赋值，dom却不能及时更新，无法及时渲染出正确的结果时，可以采用组件强制刷新的方法。

//模版上绑定key
         <SomeComponent :key="theKey"/>
         //选项里绑定data
         data(){
           return{
               theKey:0
           }
         }
         //刷新key达到刷新组件的目的
         theKey++;

也可以用强制重新渲染方法：

this.$forceUpdate()

--------------------

####  ####

#### 5. vue直接引用animate.css 动画不起作用问题 ####

--------------------

**场景（原因）：**

> 由于vue官网引用的是animate.css 3.5版本，其无法向上兼容最新的animate.css版本，这就导致了直接npm install animate.css后，动画压根无法生效。

因此解决方案就是安装对应低版本的animate.css：  
安装依赖：

npm install animate.css@3.5.1 --save

main.js全局引入：

import animated from "animate.css"
    
    Vue.use(animated)

--------------------

### 6. Vue在使用Echart时init初始化失败，获取不到DOM元素 ###

--------------------

**报错如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

**原因及解决：**

> 页面元素渲染顺序问题，一般是因为v-if控制的视图显示导致的渲染顺序出错。比如切换tab出现一个echart图，然而如果这个切换事件带有动画animation或transition，会导致本该出现的元素要延迟几毫秒才出现，但其实早就已经执行了dom元素的相关事件，会直接报错找不到该dom元素。因此一般需要给echart初始化方法添加this.$nextTick方法，等当前动画等渲染完毕的下一帧才执行。

--------------------

#### 7. vue的tab页切换与echart缩成一团问题 ####

--------------------

如果用tab页切换来控制什么时候显示哪些echart图，需要用上resize方法(先resize，然后再监听缩放来个resize)

this.$nextTick(() => {
      this.chart2.resize()
    })
    window.addEventListener("resize", () => {
      this.chart2.resize()
    })

特别的，如果将若干echart封装在组件里，还需要搭配watch监听。同时在mounted和watch钩子里判断是否已经切换tab页/拿到数据，然后再渲染数据

props: ['Data'],
    data () {
        return {
            data: this.Data
        }
    },
    watch: {
        Data: function (data) {
            if (data) {
              this.initEchart1(data)
              this.initEchart2(data)
            }
        }
    },
    mounted () {
        if (this.data) {
          this.initEchart1(this.data) // 渲染echart的方法
          this.initEchart2(this.data) // 渲染echart的方法
        }
    }

--------------------

#### 8. 没有加入git项目团队前拉代码，会导致无法推送到主分支。此时若已经加入团队，需要重新拉代码，把本地代码覆盖进去再上传代码 ####

--------------------

####  ####

### 9. Vue：使用function函数改变v-if的标志时会导致无法更新视图 ###

--------------------

**注意（排查）：**

如果以后直接粘代码时，发现视图没有渲染，很有可能是老代码还在用function定义函数而不是箭头函数`() => {}`

--------------------

#### 10. 前端的导入文件/上传文件接口注意事项 ####

--------------------

导入接口的传参比较特殊，一般用`FormData`格式的对象，其包含了文件和其他参数

beforeAvatarUpload1 (file) {
           var data = new FormData()
           data.append('uploadFile', file)
           data.append('gangId', this.id)
           phoneRecordReadExcel(data).then(res => {
           	// 其他操作
           )}
         }

用`append(参数名, 数据)`方法往FormData对象内添加文件等其他参数。

不能直接用对象格式传参：

var data = {
           gangId: this.id,
           uploadFile: file
         }

--------------------

#### 11. vue引入本地图片的特殊情况 ####

--------------------

除了img标签的src和css的background：url(),其他情况想要引用本地项目的静态资源图片需要用require('../../assets/img/aaa.png')的格式，而不能直接用'../../assets/img/aaa.png'格式引入。

如在某个组件内引用，如echart或G6引擎中的图标img或icon

icon: {
           show: true,
           cursor: 'pointer',
           img: require('../../assets/img/aa.png'),
           width: 75,
           height: 91
         },

--------------------

#### 16. vue-countupjs ####

--------------------

基于 CountUp.js 的 Vue 组件, 简易数字动画跳动

安装：

npm install vue-countupjs --save

main.js：

import VueCountUp from 'vue-countupjs'
         Vue.use(VueCountUp)

html：

<v-countup start-value="0" :end-value="1000"></v-countup>

配置项：

start-value: 起始值
         end-value: 结束值
         decimals: 小数位数
         duration: 动画持续时间
         delay: 延时更新
         immediate： true 是否立即执行动画
         animateClass： 执行期间动画, 执行后删除，优先级低于animatedClass
         animatedClass：执行前插入, 执行后删除
         option: { 其他配置项
         	useEasing: true, // 缓动动画 easing
           useGrouping: true, // 1,000,000 vs 1000000
           separator: ',', // 数字分隔符
           decimal: '.', // 小数分隔符
           prefix: '', // 前缀
           suffix: '' // 后缀
         }

--------------------

####  ####

#### 17. 不同版本vue-cli区别 ####

--------------------

> cli脚手架安装命令  
> vue-cli2: npm install vue-cli -g  
> vue-cli3 / vue-cli4: npm install -g vue@cli  
> 创建新项目命令  
> vue-cli2: vue init webpack 2.0project  
> vue-cli3 / cue-cli4: vue creat 3.0project  
> 启动项目命令  
> vue-cli2: npm run dev  
> vue-cli3 / vue-cli4: npm run serve  
> 项目结构  
> vue-cli3 / vue-cli4中移除了配置文件目录config和build文件夹，以及static静态文件夹。

--------------------

####  ####

#### 18. route用法 ####

--------------------

> **`this.$route.path`:获取当前路由的路径**
> 
> **`this.$route.name`:获取当前路由名（路由最后一级）**

**获取各级路由名：**

let names = this.$route.path.split('/')
          let firstName = names[1] // 第一级路由名
          let secondName = names[2] // 第二级路由名
          // 以此类推，另外names[0]为空字符

另外如果要获取完整url可以用 `window.location.href`

--------------------

####  ####

#### 19. 项目配置：vue cli3.0项目如何在F12里定位css所在的vue文件及行数 ####

--------------------

在vue cli3.0版本，新建vue.config.js文件在其中配置 css:\{ sourceMap: true \}

vue.config.js:

module.exports = {
            css: {
            sourceMap: true, // 开启 CSS source maps
          }
        }

--------------------

### 20. ElementUI - image-viewer - 图片放大查看组件 ###

--------------------

*      // import引入
        import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
        
        // 在组件内声明
        export default {
          components: {
            ElImageViewer
          }
        }
    
    html：
    
        <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgURL"></el-image-viewer>
 *  其中urk-list属性需传一个图片url的数组，如果只有一张图片时不会出现左右切换按钮。
 *  用v-if判断是否显示查看图片功能
 *  on-close方法为点击关闭按钮后执行的事件

--------------------

### 21理解：不能在computed中改变页面变量的值，如果需要改变，请使用watch ###

--------------------

#### 22. el-dialog垂直居中问题 ####

该组件并不自带让其垂直居中的属性，因此只能通过CSS来控制（以下样式代码已兼容IE）

.el-dialog{
          display: flex;
          display: -ms-flex; /* 兼容IE */
          flex-direction: column;
          -ms-flex-direction: column; /* 兼容IE */
          margin:0 !important;
          position:absolute;
          top:50%;
          left:50%;
          transform:translate(-50%,-50%);
          max-height:calc(100% - 30px);
          max-width:calc(100% - 30px);
        }
        .el-dialog .el-dialog__body{
          max-height: 100%;
          flex: 1;
          -ms-flex: 1 1 auto; /* 兼容IE */
          overflow-y: auto;
          overflow-x: hidden;
        }

### 23. （vue-cli2）assest和static文件夹的区别（图片放在哪)   assets->bundle(编译到一起) ###

static->resources(远程URL请求)

如果标签动态绑定了图片路径，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以

<p>动态绑定路径</p>
    <img :src="assetsURL" alt="图片加载失败" title="assets中的图片">
    <img :src="staticURL" alt="图片加载失败" title="static中的图片">

data (){
          return {
            assetsURL: require('../../assets/11.png'),
            staticURL: '../../../static/11.png'
          }
        }

<img src="/static/aaa.png" />
    
    <img src="../../static/aaa.png" />

使用绝对路径的图片不会被打包进js，也就是远程请求了static中的本地图片，如果static本地删了那页面就找不到该图片；

而使用相对路径的图片在打包时会将其完整的图片文件数据打包进js，因此即使删掉了static中的图片，仍然能够显示

综上所述，使用相对路径的是不根据项目本地改变而改变的文件，而绝对路径的是和页面直接相关的文件。

因此，为了统一区分，webpack默认要将static目录的文件原原本本的输出，即从功能划分来讲，用绝对路径的是和页面直接相关的全都放在static中；那么相对的，所有使用相对路径的文件或者说一旦打包就不会被本地实际图片所影响的图片统一放在assets中。

从实际应用角度来讲：经常要更换的图片不能被打包限死，所以放在static中可以灵活替换，如商品图片等；而固定不会变的，如项目icon、导航栏icon、按钮icon等统一放在assets中

#### 24. IE兼容难题 ####

在IE浏览器下，数字过大或者过长都有可能自动添加类似于a标签的下划线：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1][]

解决办法如下：

--------------------

#### **25. 关于计时器无法清除问题** ####

--------------------

>   
> 最好不要在外部清除计时器（比如页面销毁的钩子事件中），根据用户的操作不同有一定概率会导致清除失败。最好在setTimeout()和setInterval()内部清除，找一个判断标志。比如在页面销毁时（destroyed钩子)，可以把某个变量置空，然后如果在计时器内部发现这个变量变空，那就说明页面被我销毁了，那么他就自我销毁clearTimeout(A)或clearInterval(B),这样的话他每一轮触发计时器都必须判断这个标志才行，肯定不会出现无法销毁或销毁不及时的问题

--------------------

#### 26. Vue状态管理 ####

--------------------

大项目中，状态管理用Vuex。  
而小项目中，如果有一处需要被多个实例（组件）间共享的状态，可以使用**store模式**。

*  文件夹层级：src/store/myStore.js
 *  myStore.js

var myStore = {
            debug: true,
            state: {
              msg: 'hello'
            },
            setMsgAction (newValue) {
              if (this.debug) console.log('setMsgAction trigged with ', newValue)
              this.state.msg = newValue
            },
            clearMsgAction () {
              if (this.debug) console.log('clearMsgAction trigged')
              this.state.msg = ''
            }
          }
          
          export default myStore // 不要忘记导出export，不导出怎么用

*  在组件中使用**store模式**

import myStore from '@/store/myStore'
          export default {
          	data () {
              return {
              	shareState: myStore.state // 此处必须这样写，如果写成sharedState: store.state.message则不能同步更新
              }
          	},
          	mounted () {
          		console.log(this.sharedState.message) // 输出'hello'
          	}
          }

#### 27. vue深拷贝、浅拷贝 ####

--------------------

*  浅拷贝

当一个对象直接赋值非另一个对象时，修改另一个对象的值会影响前一个对象的值

let a = this.vehicleChange
          let b = this.vehicleChangeData
          b = a

比如，修改b对象中的name属性时，会同时把a对象中的name也修改掉

*  深拷贝
    
        this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange))
    
    JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作。
    
    注意：如果是对象的赋值，一般都是用深拷贝，否则会一起改变。通常使用的浅拷贝是适用于除对象以外的直接赋值

--------------------

#### 28. el-date-picker组件的小注意点 ####

--------------------

注意format和value-format两种属性,前者是渲染时的格式，后者是存储下来用来传参的格式，注意不要搞混

#### 29. 接口报错code的一般含义 ####

*  404：后台压根没进接口，有可能前端把接口url写错，也有可能后端把接口入口写错
 *  500：前端的接口参数给错，注意字段类型或字段名有没有写错，要不然就是少传参数
 *  503：可能是后台的服务没起好，也有可能是后台写的逻辑有错

--------------------

#### 30. el-table的show-overflow-tooltip功能因为写了template而失效问题 ####

template内不能用div标签包含很长的文字，而必须要span标签包裹，否则不显示省略号

--------------------

#### 31. 两个合并型el-table同时横向滚动 ####

先给两个table绑定上ref，这里分别为table1和table2,然后调用下面方法

scroll () {
          let table1 = this.$refs.table1.bodyWrapper // 上面的子表格
          let table2 = this.$refs.table2.bodyWrapper // 下面的子表格
          table2.addEventListener('scroll', () => {
            // 滚动监听事件
            table1.scrollLeft = table2.scrollLeft
            this.$nextTick(() => {
              // 表格滚动时有一定概率发生错位，解决办法是让table重新布局。这里官方提供了doLayout方法，来解决重新布局的问题
              this.$refs.table1.doLayout()
              this.$refs.table2.doLayout()
            })
          })

然后隐藏上面子表格的滚动条即可

--------------------

#### 32. el-table的expand扩展行功能的冗余问题 ####

如下图，当扩展行内内容过长会导致表格渲染严重错乱，甚至影响到fixed固定列，并且我也不希望每一项内容压得很窄搞得很高

![20210621035336193.png][]

解决方法是在expand的template上加上style=“display:flex;flex-wrap: wrap;”,这样多个div超出宽度后会自动换行，而不是强行挤到外面去

--------------------

#### **33 F12出现莫名的console问题** ####

--------------------

**F12里出现了一堆奇怪的输出，结果点击相应的行号却发现没有写任何console。最终发现是父组件、路由的入口处有几个console，但主要是我点击F12日志里跳转到相应的输出行他告诉我是当前文件的第几行。这算是一个误导吧，搞得我一脸懵逼，找错了方向还以为是什么离奇事件，其实是父组件里的第xxx行有个console。这个机制很有问题，希望以后可以改进，不然第一次遇到的话还不知道发生了什么。**

--------------------

#### **34. 树形控件动态赋值有可能出现渲染出错问题** ####

--------------------

由于项目的数据过多，项目要求点击一个父级节点请求一次接口，查询他的子节点有哪些。如果查询后直接赋值可能会出现渲染问题，比如第一个子节点无法正常显示扩展图标等奇怪问题。因此有必要先用一个对象数组children暂存所有子节点，然后用nextTick赋值

// 这里请求接口，获得数据res.data
    	let children = []
    	if (res.data.length !== 0) {
    	  for (let i in res.data) {
    	    children.push({
    	      label: res.data[i].name,
    	      id: res.data[i].code,
    	      children: [{
    	        label: '',
    	        id: '',
    	        children: []
    	      }]
    	    })
    	  }
    	  this.$nextTick(() => {
    	    this.treeData = children
    	  })
    	} else {
    	  this.$nextTick(() => {
    	    this.treeData[0].label = '(暂无节点)'
    	  })
    	}

--------------------

### 35. el-input限制只能输数字，不能是负数并且限制最大或最小值 ###

--------------------

<el-input v-model="ruleForm.total" oninput="value=value.replace(/[^0-9.]/g, '');if(value>100)value=100"></el-input>

首先用oninput将输入内容处理为只能为数字（负号是除了数字以外的字符所以也不会被算在里面），然后再对value做个判断超出最大值的话改回最大值，最小值同理

--------------------

#### 36. vscode快速创建多层子文件夹 ####

我们可以在左侧目录列表上新建文件夹的时候，直接输入aa/bb/cc，就可以创建多层子文件夹

--------------------

#### **37. 预编译stylus的使用**   stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数，富于表现力、动态的、健壮的 CSS ####

需要安装stylus和stylus-loader  
npm install stylus stylus-loader --save-dev

特性：

冒号可有可无  
分号可有可无  
逗号可有可无  
括号可有可无

#### 38. npm安装插件代码 ####

--------------------

npm时加上–save可以在项目的dependency上添加这个插件名，这样其他人拉了项目之后只要npm install就可以一起安装该插件，否则需要单独用一行代码来安装插件

--------------------

#### 39. el-select改变后视图不渲染问题 ####

因为组件嵌套太深，导致无法组件无法刷新或el-option绑定的List数据过多，导致来不及渲染。可以在@change方法内加入官方给出的更新选择框视图方法

this.$forceUpdate() // 官方给出的更新选择框视图方法

如果是el-input绑定@input="changeContent"方法

changeContent (val) {
              this.$forceUpdate()
            },

--------------------

#### 40. el-form校验失败问题 ####

--------------------

初始化ruleForm时，如果用this.ruleForm = \[\]来初始化有一定概率因为el-form层级过深而导致输入后无法更新视图及导致校验错误。必须在渲染el-form之前，用this.$set(this.ruleForm, ‘name’, ‘’) 的方式初始化，才可以使校验正常工作

--------------------

####    **41. el-table第一列空出一段距离使其不贴边** ####

indexHeaderClass ({ row, column, rowIndex, columnIndex }) { // 第一列表头空出一小段距离
          if (columnIndex === 0) {
            return 'padding-left: 25px'
          }
        },
    indexCellClass ({ row, column, rowIndex, columnIndex }) { // 第一列表格空出一小段距离
          if (columnIndex === 0) {
            return 'padding-left: 25px'
          }
        },

<el-table
              :data="tableData"
              :header-cell-style="indexHeaderClass"
              :cell-style="indexCellClass"
              style="width: 100%;height:100%">
              <el-table-column v-for="(item,index) in titleDates" :key="index"
                :prop="item.attr"
                :label="item.name"
                :width="item.width">
              </el-table-column>
    </el-table>

####  ####

--------------------

#### 42. 自定义动画@keyframes以及Animate.css的组合使用 ####

①在全局文件中定义自定义动画

/* 自定义的ziduan框的进场退场动画 */
    @keyframes fadeInDown{
      0%{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)}
      to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}
    @keyframes fadeOutUp{
      0%{opacity:1}
      to{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0)}}
    .ziduan-enter-active {
       animation: fadeInDown 0.5s;
    }
    .ziduan-leave-active {
       animation: fadeOutUp 0.5s;
    }

其中动画模板@keyframes可以在animate.css中挑选，然后在改一改里面的参数适应具体情况或合并多个动画效果都可以。接下载用vue的进场入场钩子.ziduan-enter-active 和.ziduan-leave-active设置相关参数，用什么动画，多久等。它的命名以‘transition的name-enter-active’为格式。

②在需要加动画效果的div外层套一层transition标签，name就是第二步的写name

--------------------

####  ####

#### 43. vue在setTimeout内修改this失效的解决办法 ####

--------------------

使用function定义setTimeout时，this会优先指向window对象。  
①第一种解决方案是必须在它的外层重新拿到当前对象this

let that = this

之后的this都用that代替即可

②第二种解决方案是使用ES6的箭头函数

setTimeOut(() => {
    	//执行的代码
    },1000)

--------------------

### 44. Promise报错 Expected the Promise rejection reason to be an Error： ###

在promise的reject中需要传入的是一个Error对象.  
因此将reject()改为reject(new Error())即可

--------------------

####  ####

#### 45. vue项目打包后，写的覆盖element的样式无效了 ####

--------------------

最近公司做的这个项目，要大量修改element里面的css样式，所以项目打包之后

会出现样式和本地开发的时候样式有很多不一样，原因可能是css加载顺序有问题，样式被覆改了。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2][]

所以在mian.js里面这样修改：  
‘./APP’和’./router’放在element css的后面，router放到最后  
还有就是每个vue组件里的style要加scoped,这很关键，起到css不被组件之间重叠的作用

####  ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210621031407438.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210621033943659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[20210621035336193.png]: https://img-blog.csdnimg.cn/20210621035336193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210621041329147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70