在 vue-cli 3 中使用

    我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 。

    然后新建一个项目。

    并配置项目。

    工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

    然后我们进入项目并启动。

    1. $ cd antd-demo
    2. $ npm run serve

    这是 vue-cli 生成的默认目录结构。

    现在从 yarn 或 npm 安装并引入 ant-design-vue。

    1. $ yarn add ant-design-vue

    修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。

    1. import Vue from 'vue';
    2. import Button from 'ant-design-vue/lib/button';
    3. import 'ant-design-vue/dist/antd.css';
    4. import App from './App';
    6. Vue.component(Button.name, Button);
    7. Vue.config.productionTip = false;
    9. new Vue({
    10.   render: h => h(App),
    11. }).$mount('#app');

    修改 的 template 内容。

    好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的官方文档。

    此时我们需要对 vue-cli 的默认配置进行自定义。

    是一个用于按需加载组件代码和样式的 babel 插件（原理）。

    1. $ yarn add babel-plugin-import --dev

    使用 vue-cli 2 的小伙伴

    修改.babelrc文件，配置 babel-plugin-import

    1.   {
    2.     "presets": [
    3.       ["env", {
    4.         "modules": false,
    5.         "targets": {
    6.           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
    7.         }
    8.       }],
    9.       "stage-2"
    10.     ],
    11. -   "plugins": ["transform-vue-jsx", "transform-runtime"]
    12. +     "transform-vue-jsx",
    13. +     "transform-runtime",
    14. +     ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
    16.   }

    使用 vue-cli 3 的小伙伴

    修改babel.config.js文件，配置 babel-plugin-import

    然后移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 样式代码，并且按下面的格式引入模块。

    1.   // src/main.js
    2.   import Vue from 'vue'
    3. - import Button from 'ant-design-vue/lib/button';
    4. + import { Button } from 'ant-design-vue';
    5. - import 'ant-design-vue/dist/antd.css'
    6.   import App from './App'
    8.   Vue.component(Button.name, Button)
    10.   Vue.config.productionTip = false
    12.   new Vue({

    自定义主题

    按照 的要求，自定义主题需要用到 less 变量覆盖功能。