美文网首页
记录Vue3.x改造旧项目的爬坑之路

记录Vue3.x改造旧项目的爬坑之路

作者: Splendid飞羽 | 来源:发表于2021-02-28 14:42 被阅读0次

    背景说明:原公司项目采用的是webpack+vuex+vueRouter+elementUI构建的一个比较正常的项目
    下面分别记录在整改的过程中遇到的一些问题
    vue3.x安装

    首先开始我们的准备工作,搭建vue3的工作环境

    1> node需要升级到最新版

    直接去官网下载最新的node安装包

    2> 更新npm

    npm install -g npm 或者 cnpm install -g npm(淘宝镜像更新)

    3> 接下来是webpack更新

    必须安装webpack4的三个基础包:webpack,webpack-cli,webpack-dev-server

    npm i webpack webpack-cli webpack-dev-server  --save-dev 
    或者使用yarn更新 yarn add webpack webpack-cli webpack-dev-server --save -dev
    

    注意:webpack4不再支持CommonsChunkPlugin,改用optimization

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 20000,
          minRemainingSize: 0,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 30,
          maxInitialRequests: 30,
          enforceSizeThreshold: 50000,
          cacheGroups: {
            defaultVendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              reuseExistingChunk: true,
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true,
            },
          },
        },
      },
    };
    W
    

    接下来进入我们的正题

    开始整改main.js

    由于涉及到了elementUI所以需要更新vue3.x对应的element-plus
    element-plus安装
    包含了全部引入和按需引入的详细步骤
    在引入的过程中如果浏览器出现了报错,不要紧张,这可能是main.js中引入的其他依赖中没有整改导致的
    比如我就遇到了一个有趣的错误
    报错信息为:path is not defined
    当时找了一上午,最后才知道是最新的webpack不支持直接引入
    需要使用Polyfill(path-browserfy)
    在webpack的config中配置

    plugins:[
          resolve:{
             'path': require.resolve('path-browserify')
         }
    ]
    

    path-browserify这个需要安装一下

    开始整改vue-router
    npm install vue-router@4
    
    // 以前是
    // import Router from 'vue-router'
    import { createRouter } from 'vue-router'
    
    const router = createRouter({
      // ...
    })
    

    vue-router4.x安装指南

    开始整改vuex
    npm install vuex@next --save
    
    import { createApp } from 'vue'
    import { createStore } from 'vuex'
    
    // Create a new store instance.
    const store = createStore({
      state () {
        return {
          count: 0
        }
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })
    
    const app = createApp({ /* your root component */ })
    
    // Install the store instance as a plugin
    app.use(store)
    

    vuex4.x安装指南

    最后到目前写文章的时间位置
    下面是各个依赖的安装版本

    vue ^3.0.6
    vue-loader ^16.0.0-beta.8
    vue-router ^4.0.0-beta.13
    vuex ^4.0.0
    webpack ^5.24.2
    webpack-cli 3.3.12
    webpack-devserver ^3.11.2
    element-plus ^1.0.2-beta.32
    vue-i18n ^9.0.0-rc9
    

    参考文章

    相关文章

      网友评论

          本文标题:记录Vue3.x改造旧项目的爬坑之路

          本文链接:https://www.haomeiwen.com/subject/lmgifltx.html