2022/03/08 vue2 升级到 vue3 记录

原文地址

// 背景叙述
// 这次升级想要把之前后台网站 vue2 版本的部分代码 拷贝到 vue3 的项目里。
// 就是想要偷懒 (ↀ ω ↀ)
//
// ----------  (=￣ω￣=) --------- 分割线 ---------- Σ( ° △ °|||)︴----------
//
// 本次项目使用框架插件
// ['vue3', 'vuex', 'antd2', 'vue-router', 'axios']

一. 准备部分

1. 安装vue3

# 卸载
$ npm uninstall vue-cli
# 安装
$ npm install -g @vue/cli
# 升级
$ vue upgrade --next
# 最新稳定版
$ npm install vue@next

1. 构建 vue3 项目 ``` // project name ‘level-up’ $ vue create levelUp

Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? Yes ? Save preset as: default

$ cd level-up $ npm install antd axios —save

<br />3. 代码迁移
![image.png](https://cdn.nlark.com/yuque/0/2022/png/21425465/1646977846670-b2a152b2-ee96-42e8-8cfb-d3279696855b.png#clientId=u892916c8-92f3-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub836ee29&margin=%5Bobject%20Object%5D&name=image.png&originHeight=175&originWidth=175&originalType=url&ratio=1&rotation=0&showTitle=false&size=62907&status=done&style=none&taskId=u935557bb-9b94-4b6b-b6d2-dddb4b60c87&title=)<br />ちょっと待ってください
<a name="ehmrR"></a>
## **二. 升级 level Up**
<a name="MP6T4"></a>
## **vue2 **➝** vue3**
[介绍 | Vue.jsv3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88](https://link.zhihu.com/?target=https%3A//v3.cn.vuejs.org/guide/migration/introduction.html%23%25E6%25A6%2582%25E8%25A7%2588)<br />**antd ➝ antd22**<br />[Ant Design Vue2x.antdv.com/docs/vue/migration-v2-cn](https://link.zhihu.com/?target=https%3A//2x.antdv.com/docs/vue/migration-v2-cn)
**问题**
```json
// 报问题 Vue
// warning Replace `xxx` with `“xxx“` prettier/prettier 
// 配置 .prettierrc
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "arrowParens": "avoid"
}
// 执行
$ npm run lint --fix
// 重启编辑器
// OR
// 配置 package.json 修改 rules
"rules": {
  "semi": 0,
  "quotes": 0,
  ...
}
// 接着 再重新编译就好了

slot

<!-- 报问题 vue -->
<!-- `slot` attributes are deprecated -->
<!-- 问题 -->
<span slot="title"></span>
or
<span slot="title" slot-scope="xxx"></span>
<!-- 解决 -->
<template #title></template>
or
<template #title="{xxx}"></template>

deep

// 报问题 CSS 编译时错误
// node
// the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
// 错误
/deep/ .a{}
// 正确
/* deep selectors */
::v-deep(.a) {}
/* shorthand */
:deep(.a) {}
/* targeting slot content */
::v-slotted(.a) {}
/* shorthand */
:slotted(.a) {}
/* one-off global rule */
::v-global(.a) {}
/* shorthand */
:global(.a) {}

keep-alive升级

<!-- 报问题 antd2 -->
<!-- <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: -->
// before
<keep-alive>
  <transition v-if="$route.meta.keepAlive">
    <router-view></router-view>
  </transition>
</keep-alive>
<transition v-if="!$route.meta.keepAlive">
  <router-view></router-view>
</transition>
// after
<router-view v-slot="{ Component }">
  <transition v-if="$route.meta.keepAlive">
    <component :is="Component" />
  </transition>
  <transition v-if="!$route.meta.keepAlive">
    <component :is="Component" />
  </transition>
</router-view>

废弃icon

修改
Antd 2
1 . Form
合并了 FormModel、Form，详见下方的 Form 重构部分。
form 表单除了样式以外，其他需要重构。

1. v-model
   v-model 更改成 v-model:xxx，具体涉及组件：
   v-model 改成 v-model:checked 的组件有: CheckableTag、Checkbox、Switch
   v-model 改成 v-model:value 的组件有: Radio、Mentions、CheckboxGroup、Rate、DatePicker
   v-model 改成 v-model:visible 的组件有: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown
   v-model 改成 v-model:activeKey 的组件有: Collaps、Tabs
   v-model 改成 v-model:current 的组件有: Steps
   v-model 改成 v-model:selectedKeys 的组件有: Menu

2. icon
   官方图标组件不能和 1.x 版本一样，允许 自定义 icon 和 官方 icon 合并使用。
   官方文档里没有合并使用的 案例 和 api。
   必须分开使用。。。
   
   我想了很多办法，将两者合并为一个组件，然后根据 type 属性 调用 icon。
   ……
   ……
   ……
   然而
   
   官方
   
   我

就只能这样了吗？

跑去 阿里 iconfont 发现了官方图标库
iconfont-阿里巴巴矢量图标库www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402
全部添加到自定义的项目里面，然后调用就可以了。

v-model升级

三. 完成

总结：

1. antd2 文档有按需引入，但都是在 main.js 创建的 app 对象 use 引入。

相关组件介绍里也没有告诉如何引入。。。

这样可以在单页面里引入，
import {Menu} from ‘ant-design-vue’ export default { components:{ ‘AMenu’:menu, ‘AMenuItem’:menu.Item, ‘ASubMenu’:Menu.SubMenu, … }
但是这写法。。。

看了 Menu 组件的源码

好家伙，这是告诉我这么写吗？

import {Menu} from 'ant-design-vue'
export default {
  created() {
    Menu.install(this.$.appContext.app)
  }
}

于是只能放弃 按需引入，使用全局引入了

1. 使用 from 验证每次输入都会提示。
   在 node_modules/async-validator/dist-node 和 /dist-node 目录里修改 index.js
   把 console.warn 禁用就可以了。