升级方案

这是一篇关于升级方案的思维导图。但是如果是大一点的项目或者需要在子组件之间频繁传递数据的时，前面使用的方式就不太方便。而Vue 的状态管理工具 Vuex 的出现就是为了解决这个问题。

升级方案

• vue
  • 1. npm install -g @vue/cli或者yarn add -g @vue/cli
  • 2. vue create project_name
  • 3. 将原x6中的代码逐步移植进来（需要改造成兼容3.0的写法）
    • 原有的过滤器不再支持，即filter
    • 原有的extends不再支持，也不支持将全局方法、属性挂载到vue原型
    • 基于以上两点，components目录下的组件需要进行适当的重构
    • 原有的options api开发写法仍然支持，改造成composition api写法非必要
    • storage方案仍然采用
    • 待补充...
• vue-router
  • 1. npm i vue-router@next/yarn add vue-router@next
  • 2. 原有的new VueRouter写法不再支持，4.x版本使用createRouter
  • 3. 导航全局守卫做适当调整
• vuex
  • 1. npm i vuex@next / yarn add vuex@next
  • 2. 原有的new Vuex不再支持，新版本使用createStore方案
  • 3. store挂载的地方为app实例，不再是vue原型上。故不属于顶层app范围内的组件中不能直接使用
  • 4. 组件中使用方法做调整。原有的this.$store在composition api中不受支持，需要添加useStore方法
• 组件库
  • 1. npm i element-plus --save / yarn add element-plus
  • 2. 大部分写法仍然保持之前的风格，开发的时候注意查询官方文档