• 在 vue-cli 3 中使用
    • 安装和初始化
    • 引入 antd
    • 高级配置
      • 使用 babel-plugin-import
        • 使用 vue-cli 2 的小伙伴
        • 使用 vue-cli 3 的小伙伴
      • 自定义主题

    在 vue-cli 3 中使用

    vue-cli 是业界最优秀的 Vue 应用开发工具之一,本文会尝试在 vue-cli 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。

    安装和初始化

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

    1. $ npm install -g @vue/cli
    2. # OR
    3. $ yarn global add @vue/cli

    然后新建一个项目。

    1. $ vue create antd-demo

    并配置项目。

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

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

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

    此时浏览器会访问 http://localhost:8080/ ,看到 Welcome to Your Vue.js App 的界面就算成功了。

    引入 antd

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

    1. ├── README.md
    2. ├── babel.config
    3. ├── package.json
    4. ├── public
    5. ├── favicon.ico
    6. └── index.html
    7. ├── src
    8. ├── assets
    9. └── logo.png
    10. ├── components
    11. └── HelloWorld.vue
    12. ├── App.vue
    13. └── main.js
    14. └── yarn.lock

    现在从 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';
    5. Vue.component(Button.name, Button);
    6. Vue.config.productionTip = false;
    7. new Vue({
    8. render: h => h(App),
    9. }).$mount('#app');

    修改 src/App.vue的 template 内容。

    1. <template>
    2. <div id="app">
    3. <img src="./assets/logo.png">
    4. <a-button type="primary">Button></a-button>
    5. </div>
    6. </template>
    7. ...

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

    高级配置

    我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。

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

    使用 babel-plugin-import

    babel-plugin-import 是一个用于按需加载组件代码和样式的 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. + "plugins": [
    13. + "transform-vue-jsx",
    14. + "transform-runtime",
    15. + ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
    16. + ]
    17. }

    使用 vue-cli 3 的小伙伴

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

    1. module.exports = {
    2. presets: ["@vue/app"],
    3. + plugins: [
    4. + [
    5. + "import",
    6. + { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    7. + ]
    8. + ]
    9. };

    然后移除前面在 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'
    7. Vue.component(Button.name, Button)
    8. Vue.config.productionTip = false
    9. new Vue({
    10. render: h => h(App)
    11. }).$mount("#app");

    最后重启 npm run serve 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的警告信息。关于按需加载的原理和其他方式可以阅读这里。

    自定义主题

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