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' // 新增

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