Used in VUe-CLI 3

Vue-cli is one of the best vUE application development tools in the industry. This article will try to use ANTD components in vue-CLI created projects and customize the configuration of WebPack to meet various engineering requirements.

Install and initialize#

We need to install vue-CLI tools on the command line, and you may need to install YARN as well.

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

Then create a new project.

$ vue create antd-demo
Copy the code

And configure the project.

The tool automatically initializes a scaffold and installs various necessary dependencies for the Vue project, and if you have network problems along the way, try configuring the proxy or using another NPM Registry.

Then we go into the project and launch.

$ cd antd-demo
$ npm run serve
Copy the code

The browser will then go to http://localhost:8080/ and see the Welcome to Your vue.js App interface.

The introduction of antd#

This is the default directory structure generated by VUe-CLI.

├ ─ ─ the README. Md ├ ─ ─ Babel. Config ├ ─ ─ package. The json ├ ─ ─ public │ ├ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML ├ ─ ─ the SRC │ ├ ─ ─ assets │ │ └ ─ ─ logo. PNG │ ├ ─ ─ components │ │ └ ─ ─ the HelloWorld. Vue │ ├ ─ ─ App. Vue │ └ ─ ─ the main, js └ ─ ─ yarn. The lockCopy the code

Now install and import Ant-Design-Vue from YARN or NPM.

$ yarn add ant-design-vue
Copy the code

Modify SRC /main.js to introduce antD’s button component and all style files.

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');
Copy the code

Modify the template content of SRC/app. vue.

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

Now that you have antD’s blue button component on the page, you can move on to other components to develop your application. You can refer to the official documentation of VUe-CLI for other development processes.

Advanced configuration#

We now have the component running successfully, but there are a lot of problems in the actual development process, such as the example above which actually loads the entire STYLE of the ANTD component (which is a problem for front-end performance).

In this case, we need to customize the default configuration of vue-CLI.

Use the Babel – plugin – import#

Babel-plugin-import is a Babel plug-in (principle) for loading component code and styles on demand.

$ yarn add babel-plugin-import --dev
Copy the code

Use vUE – CLI 2 buddy#

Modify the. Babelrc file and configure 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" }]
+   ]
  }
Copy the code

Use vUE – CLI 3 buddy#

Modify the babel.config.js file and configure babel-plugin-import

module.exports = { presets: ["@vue/app"], + plugins: [ + [ + "import", + { libraryName: "Ant-design-vue ", libraryDirectory: "es", style: true}Copy the code

Then remove the import ‘ant-design-vue/dist/antd. CSS ‘from SRC /main.js in full; Style code, and introduce modules in the following format.

  // 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

  new Vue({
    render: h => h(App)
  }).$mount("#app");
Copy the code

Finally restart NPM Run serve to visit the page, antD component js and CSS code will be loaded on demand, you will not see such a warning message on the console. You can read here about the principles and other ways of loading on demand.