Vue3.x配合Antv使用

准备工作

1. 安装vue-cli,由于cli版本更新较快，本文采用vue-cli 3.x版本因此安装命令如下：

yarn global add vue-cli@3

Tip: 安装完后检查版本vue -V 如环境报错，需要在环境变量中path中添加 vue.cmd的路径，如C:\Users\haha\AppData\Local\Yarn\bin

2. 创建项目文件夹并进入

vue create antv-demo
cd antv-demo

3. 安装ant-design-vue

vue add ant-design-vue

4. 设置按需加载

yarn add babel-plugin-import -D

5. 修改main.js文件

import Vue from 'vue'
import App from './App.vue'
import { Button } from 'ant-design-vue'

Vue.config.productionTip = false
Vue.component(Button.name, Button) 
new Vue({
 render: h => h(App)
}).$mount('#app')

6. 修改babel.config.js文件

module.exports = {
   presets: [
       '@vue/app'
   ],
   plugins: [
       [
           'import',
           {libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true}
       ]
   ]
}

7. 在App.vue中使用antd组件Button

8. 此时运行yarn serve会有问题因此需要安装less以及less-loader

yarn add less less-loader -D

安装完成后启动项目，会有less或者less-loader错误，因此需要安装指定版本less以及less-loader，本文采用less 2.7.2 less-loader 5.0.0

yarn add [email protected] [email protected] -D

9. 运行项目

yarn serve

image

Vue3.x配合Antv使用