Vue 實現 Element 的按需引入

使用 Vue-Cli 腳手架創建 Vue 項目實現 Element 的按需引入

1. 安裝 element-ui 和 babel-plugin-component 和 babel-preset-es2015 依賴

   • npm intall element-ui --save
   • npm install babel-plugin-component -D
   • npm install babel-preset-es2015 -D

2. 修改 .babelrc 文件

   • {
       "presets": [["es2015", { "modules": false }]],
       "plugins": [
         [
           "component",
           {
             "libraryName": "element-ui",
             "styleLibraryName": "theme-chalk"
           }
         ]
       ]
     }
     

3. 在 main.js 文件下，按需引入組件，且掛在到 Vue 實例上

   • import {
       Butto（組件名）
     } from 'element-ui'
     
     Vue.use(Button)
     

4. 在 template 中便可使用 Button 組件

   • <template>
       <div>
       	<el-button type='primary'>按鈕</el-button>
       </div>
     </template>