一、升级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
yarn add 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')
相对于2.0版本的引入略有不同,3.0使用
createApp(App)
创建Vue的实例,然后使用熟悉的
use
,进行引入组件库。
注意:
安装
ant-design-vue@next
后,项目控制台出现这个错误↓
Error: Cannot find module 'vue-loader-v16/package.json'
重新执行
npm i
或者
yarn
,再重新运行即可
版权声明:本文为wn1245343496原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。