vue create ant-demo
选择默认选项后开始安装：
进到初始化的ant-demo项目
cd ant-demo
安装ant-design-vue
npm add ant-design-vue
安装 babel-plugin-import
npm add babel-plugin-import --dev
修改man.js文件
import Vue from ‘vue‘
import App from ‘./App.vue‘
import store from ‘./store‘
import { Button } from ‘ant-design-vue‘ // 新增
Vue.config.productionTip = false
Vue.component(Button.name, Button) // 新增
new Vue({
store,
render: h => h(App)
}).$mount(‘#app‘)
修改babel.config.js文件
module.exports = {
presets: [
‘@vue/cli-plugin-babel/preset‘
],
// 新增
plugins: [
[
‘import‘,
{ libraryName: ‘ant-design-vue‘, libraryDirectory: ‘es‘, style: true }
]
]
}
在app.uve中使用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="scss">
#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>
运行项目 npm run serve
遇到问题：
Failed to resolve loader: less-loader You may need to install it.
安装一下这个包：
npm install less-loader --save-dev
再次运行，遇到问题：
Module build failed (from ./node_modules/less-loader/dist/cjs.js): Error: Cannot find module ‘less‘
还是缺包：再次安装：
install less --save-dev
查了文档发现antd 的样式使用了 Less 作为开发语言，vue初始化项目的时候默认是sass
继续运行还是有问题：
Module build failed (from ./node_modules/less-loader/dist/cjs.js): // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin();
解决办法，降低less版本：
npm uninstall less npm install less@2.7.2 --save-dev
再次运行npm run serve
原文：https://www.cnblogs.com/xiaoyun1121/p/11698488.html