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 [email protected] --save-dev

再次运行npm run serve

ant-design-vue快速搭建

猜你喜欢