vue|Vue3.0 使用 ant-design-vue vue|antd-design-vue|前端

一、升级Vue-clidao 3.0 全局更新Vue-cli版本

yarn global add @vue/cli@next # OR npm install -g @vue/cli@next

输入vue -V(大写的V)查看版本

@vue/cli 4.5.4

二、创建3.0版本的Vue项目如图，使用vue create vue-demo创建项目，会有如下提示，选择中间项可以直接创建3.0的项目，选择最后一项，可以手动选择创建2.0或者3.0版本和其他配置项

文章图片

三、引入ant-design-vue

yarnadd ant-design-vue@next # OR npm i --save ant-design-vue@next

在main.js中引入

import {createApp} from 'vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; import App from './App.vue'createApp(App) .use(Antd) .mount('#app')

【vue|Vue3.0 使用 ant-design-vue】相对于2.0版本的引入略有不同，3.0使用createApp(App)创建Vue的实例，然后使用熟悉的use，进行引入组件库。
注意:
安装ant-design-vue@next后，项目控制台出现这个错误↓
Error: Cannot find module 'vue-loader-v16/package.json'
重新执行npm i或者yarn，再重新运行即可