谢邀，人在上海，天天摸鱼。居家隔离，想翻个新。

首先我们要清楚为什么要翻新呢？

我的项目是一个vue2的老项目，为了替换成vue3，那么我们首先就要了解下vue2与vue3的区别

vue3和vue2的对比

vue2的缺陷

vue2代码复用困难，vue2的代码复用方式有Mixin，但很容易导致命名冲突，且无法解决义务逻辑复用

vue2对于ts的支持不足，因为那个阶段js还是主流，所以对ts的兼容性不是很好。
vue2内部实现过渡依赖this，导致无法进行treeshaking - 搜索 - 掘金 (juejin.cn)（详细可以查看这位大佬的文章）。

vue3的优势

vue3支持vue2的大多数特性，能够实现对vue2的向下兼容
vue3对比vue2具有明显的性能提升
- 打包大小减少41%
- 初始渲染快55%，更新快133%
- 内存使用减少54%
vue3具有的composition API实现逻辑模块化和重用
vue3.2通过setup语法糖进一步简化开发，可以编写更加优雅的代码
vue3脚手架默认实现对ts的支持
增加了很多新特性，如：Fragment、Teleport、Suspense

项目初始化

了解完两者之间的差异后，是否对升级的目的有了较为清晰的理解呢？那么接下来我们就准备开始实操咯。

首先我们可以先从github或者自己的项目上拉取一个vue2的项目进行初始化。

git clone xxxxxxxxxx.git(项目地址)
cd xxxxxxxxxx

第二步，对vue全家桶依赖进行升级

删除项目中的原有vue全家桶依赖，即package.json中的

"vue": "^2.0.0",
"vue-router": "^2.0.0-0",
"vuex": "^2.0.0-0",

替换为vue3的版本，修改为：（以下是我vue3项目的版本）

"vue": "^3.2.2",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",

然后安装依赖

npm install

4.配置启动插件和编译依赖：安装vue3的启动包@vue/cli-serve和编译包@vue/compiler-sfc@vue/component-compiler-util

npm install @vue/cli-serve @vue/compiler-sfc @vue/component-compiler-util

5.修改启动信息：修改package.json中的启动信息(以下是我的vue3项目的配置包含一些规范的依赖)

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "local" : "vue-cli-service serve --mode local",
    "lint": "vue-cli-service lint",
    "prettier": "prettier --write .",
    "prepare": "husky install"
  },

第三步，对vuex和vue-router进行语法升级举个例子，vue2的版本使用router,是可以直接通过使用this直接调用

this.$router.push()

而vue3需要进行引入

import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import 'amfe-flexible'

export default {
  name: '',
  setup() {
    console.log('1-开始创建组件-setup')
    const route = useRoute()

才可以进行router的使用，PS：这只是一部分，其他的请参考vue3官网自行学习

第四步，将自己的老项目一些vue2写的页面进行更新。

有vue3基础的兄弟们知道vue3是有setup这个语法糖的，而且如果你学过ts，也可以运用到上面。

举个例子：

<script lang="ts">
export default defineComponent({
 setup() {
    const route = useRoute()
    const dataMap = reactive({
      shopData: {} as ShopData,
      current: ref(0),
      backIcon: require('./asset/grey-back.png'),
      shareIcon: require('./asset/grey-share.png'),
      isWeiXin: ref(false),
      wxPopup: ref(false),
      sendData: JSON.stringify({
        type: 'wetProduct',
        productId: route.query.productId
      })
    })
    const onChange = (index: number) => {
      dataMap.current = index
    }

这是我翻新一个的vue3页面，使用了ts中的接口以及变量申明，是不是显得代码很规范，虽然本人也是个ts新手，之后会进行深入学习继续和大家分享。

今天就先讲到这里，如果大家觉得有什么遗漏欢迎评论区留言，会同步更新~

前端项目工程化：vue的升级改造（一）