在vue-cli2 中使用 ant design vue

在vue-cli中使用 ant design vue

一、按照 vue-cli 工具

npm install -g @vue/cli

二、新建要给 vue 项目

vue create antd-demo
选择 Default ([Vue 2] babel, eslint)，等待项目创建完成
进入项目，并启动
cd antd-demo
npm run serve

三、引入 antd

npm install ant-design-vue --save

1、修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。
import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2、修改 src/App.vue的 template 内容。
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
  </div>
</template>
修改完成后可以看到 antd 的蓝色按钮

四、使用 babel-plugin-import 按需加载组件

npm install babel-plugin-import --save-dev

1、修改 babel.config.js 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
  ]
}

2、修改 src/main.js
import Vue from 'vue';
import { Button } from 'ant-design-vue';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

五、定制主题

1、 npm install less less-loader --save-dev

2、修改 babel.config.js 文件，改 "style": true
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }]
  ]
}

3、 在项目根目录下新建 vue.config.js 文件
// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
          less: {
            lessOptions: {
              modifyVars: {
                'primary-color': '#1DA57A',
                'link-color': '#1DA57A',
                'border-radius-base': '2px',
              },
              javascriptEnabled: true,
            },
          },
        },
    },
};

4、重新运行 npm run serve 可看到主题色发生了变化
其他主题参数的配置参见：
https://www.antdv.com/docs/vue/customize-theme-cn/
https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
https://cli.vuejs.org/config/

本文内容到此结束。