ant-design-vue快速搭建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' // 新增
Vueponent(Button.name, Button) // 新增
new Vue({
store,
render: h => h(App)
}).$mount('#app')
antdesignvue 配置外部文件修改fig.js⽂件
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 的样式使⽤了作为开发语⾔，vue初始化项⽬的时候默认是sass 继续运⾏还是有问题：
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// github/ant-design/ant-motion/issues/44
.bezierEasingMixin();
解决办法，降低less版本：
npm uninstall less
npm install less@2.7.2 --save-dev
再次运⾏npm run serve

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。