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

2. 构建 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

3. 代码迁移

ちょっと待ってください

二. 升级 level Up
vue2 ➝ vue3

介绍 | Vue.js

Ant Design Vue

问题

// 报问题 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,
  ...
}

// 接着 再重新编译就好了

<!-- 报问题 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>

// 报问题 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) {}

<!-- 报问题 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>

修改

Antd 2

1 . Form

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

2. 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

3. icon

官方图标组件不能和 1.x 版本一样，允许 自定义 icon 和 官方 icon 合并使用。

官方文档里没有合并使用的 案例 和 api。

必须分开使用。。。

我想了很多办法，将两者合并为一个组件，然后根据 type 属性 调用 icon。

......

......

......

然而

官方

我

就只能这样了吗？

跑去 阿里 iconfont 发现了官方图标库

iconfont-阿里巴巴矢量图标库
​
全部添加到自定义的项目里面，然后调用就可以了。

三.　完成
总结：

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)
  }
}

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

2. 使用 from 验证每次输入都会提示。

在 node_modules/async-validator/dist-node 和 /dist-node 目录里修改 index.js

把 console.warn 禁用就可以了。

今回はここまで