View Design升级Vue3方案

node版本需要在8.9的版本以上！

首先为什么要升级呢？

1. 放弃 Object.defineProperty ，使用更快的原生 Proxy
2. diff算法优化使性能比vue2.x快1.2~2倍
3. 组合/CompositionAPI（类似于React Hooks）
4. 模板可以有多个根元素
5. 按需编译，体积比vue2.x更小

其次主要模块升级对应版本的情况

模块	原始版本	升级版本
node.js	v8.x	v14.17.6
脚手架	@vue-cli 2.x	@vue/cli 4.x
vue	^2.5.2	^3.0.0
vue-router	^3.1.3	^4.0.12
vuex	^3.0.1	^4.0.0
ant-design-vue	^1.5.3	^2.7.8

vue2.x与vue3.x的区别

3.1 vue-cli2 VS vue/cli4

3.1.1 基本文件目录的区别

下列表格中括号里为举例说明

配置项	vue2.x	vue3.x
环境变量	根目录config文件夹下创建xx.env.js(test.env.js)文件	根目录创建以env(.env.test) 开头的文件
webpack	根目录build文件夹下创建webpack(webpack.base.config.js)配置文件	根目录vue.config.js文件中配置
index.html	初始化后在根目录下	初始化后在public文件夹下
babel	根目录下.babelrc文件	根目录下.babel.config.js文件

3.1.2 配置代理

vue-cli2：项目根目录config文件夹下的index.js文件

module.exports = {
  dev: {
    proxyTable: {
      "/tsapi/": { //代理地址
        target: 'http://keynote-test.zhonganonline.com/tsapi/', //需要代理的地址
        changeOrigin: true, //是否跨域
        secure: false,
        baseURL: 'http://keynote-test.zhonganonline.com/tsapi/',
        pathRewrite: {
          '^/tsapi/': '/'
        }
      }
    }
  }
}

vue/cli4：项目根目录vue.config.js文件

module.exports = {
  devServer: {
    port: 8080,
    host: 'za.zhonganonline.com',
    https: true,
    open: true,
    proxy: {
      '/tsapi/': {
        target: 'http://keynote-test.zhonganonline.com/tsapi/',
        changeOrigin: true,
        pathRewrite: {
          '^/tsapi/': '/'
        }
      }
    }
  }
};

注意服务配置位置

3.1.3 配置别名

vue-cli2：项目根目录下build文件夹下webpack.base.conf.js文件

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],