准备工作
- 安装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
- 创建项目文件夹并进入
vue create antv-demo
cd antv-demo
- 安装ant-design-vue
vue add ant-design-vue
- 设置按需加载
yarn add babel-plugin-import -D
- 修改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')
- 修改babel.config.js文件
module.exports = {
presets: [
'@vue/app'
],
plugins: [
[
'import',
{libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true}
]
]
}
- 在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>
- 此时运行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
- 运行项目
yarn serve
image
Vue3.x配合Antv使用
