vue-cli2 scaffolding project introduces elementUI on demand

Let me first talk about the benefits of the author's own introduction of elementui on demand. The global introduction is more than 1M, and less than 400K after the on-demand introduction. The components used by the author on-demand introduction include paging, date selector, tree selector, and input.

first step:

     Project directory execute npm install babel-plugin-component --D

Step 2: Modify .babelrc

This is where the Vue scaffolding project introduces the core of elementui on demand, because most newbies don't know how to configure babel.

If you directly copy and paste the configuration file provided by the official website, you will definitely report an error, because you have overwritten the default configuration of the scaffolding. The correct way is to integrate, babelrc should be modified to:

{
  "presets": [
    ["env", { "modules": false }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],"transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

If the elementui version is 1.X, the value of styleLibraryName should be modified to theme-default

Step 3: Introduce components on demand

For example, if you want to introduce buttons on demand,

  import Vue from 'vue' 

  import App from './App' 

  import router from './router'

  import 'element-ui/lib/theme-chalk/index.css' 

import { Button } from 'element-ui'

   Vue.use(Button)

  Examples introduced by the author of the post:

 

Step 4. Error handling

如果报错Module build failed: Error: Couldn't find preset "es2015" relative to directory

 Then execute npm install babel-preset-es2015 --save-dev

报错These dependencies were not found:deepmerge,resize-observer-polyfill ,throttle-debounce/debounce

则npm install --save deepmerge resize-observer-polyfill throttle-debounce/debounce

Online example: here is an example of vue-cli on-demand introduction of elementui written by the author for reference

GitHub-bill-mark/elementui-demand: When vue 2.X and elementui 2.X are used together, they are introduced on demand.