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

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <a-button type="primary">Button></a-button> // 新增
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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 less@2.7.2 less-loader@5.0.0 -D

9. 运行项目

yarn serve

image

Vue3.x配合Antv使用