ant-design-vue/docs/vue/use-with-vue-cli.zh-CN.md
2018-09-14 10:04:08 +08:00

4.3 KiB
Raw Blame History

在 vue-cli 3 中使用

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

安装和初始化

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

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

然后新建一个项目。

$ vue create antd-demo

并配置项目。

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

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

$ cd antd-demo
$ npm run serve

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

引入 antd

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

├── README.md
├── babel.config
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
└── yarn.lock

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

$ yarn add ant-design-vue

修改 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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

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

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
    <router-view/>
  </div>
</template>
...

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

高级配置

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

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

使用 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理)。

$ yarn add babel-plugin-import --dev

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

  {
    "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }],
      "stage-2"
    ],
-   "plugins": ["transform-vue-jsx", "transform-runtime"]
+   "plugins": [
+     "transform-vue-jsx",
+     "transform-runtime",
+     ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+   ]
  }

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

  // src/main.js
  import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
  import App from './App'

  Vue.component(Button.name, Button)

  Vue.config.productionTip = false

  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
  })

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

自定义主题

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