vue-cli3 element 按需加載按需引入

1.安裝element-ui

npm i element-ui -S

 

2.安裝按需引入必要插件

npm install babel-plugin-component -D

 

3.修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

 

4.在main.js中按需引入你要用到的組件，比如Button按鈕

import Vue from 'vue'
import { Button, Input} from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Input)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

 

5.示例：在.vue文件中使用

<el-input v-model="input" placeholder="請輸入內容"></el-input>
<el-button type="primary">主要按鈕</el-button>


<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>