vue——按需引入elementUI（以時間選擇器為例）

參考：https://www.jianshu.com/p/40da0ba35ac1

 

1.  安裝

npm install babel-plugin-component –D

 

2.  修改.babelrc

原babelrc：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",]
}

 

修改后：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
　　　　["component",{　　　　　　// <==
    　　　　"libraryName":"element-ui",// <==
    　　　　"styleLibraryName":"theme-chalk" // <==
  　　　　}
　　　　]
　　]
}

 

3.  按需引入組件

main.js:

import Vue from 'vue';
import App from './App';
import { DatePicker } from 'element-ui';

Vue.use(DatePicker);

 

需要用到elementUI的組件:

<style scoped>
  @import 'https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css';
</style>