Vue3.0 使用 ant-design-vue

  • Post author:
  • Post category: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

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 版权协议,转载请附上原文出处链接和本声明。