摘要
市面上的UI庫很多，但是相對于在項目中使用到的UI組件很少猜绣，所以沒必要全部引入，導致打包文件大的問題霹俺，這個時候按需要引入就很必要了柔吼，很多UI庫都做了按需引入的功能，按照各自的官方文檔在你的項目中配置即可丙唧。
環(huán)境
- node：v10.16.0
- vue-cli: @vue/cli 4.1.2
vue4.x element-ui按需引入
按照vue-cli官方文檔創(chuàng)建項目嚷堡，[傳送門]https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create，
方式一
通過vue ui可視化方式添加element-ui組件庫
- 1.終端執(zhí)行vue ui打開項目可視化操作界面
# cd 項目
vue ui
-
2.選擇左上角插件艇棕，點擊右上角添加插件
image.png -
3.搜索element蝌戒，出現(xiàn)的第一個便是element-ui組件庫，點擊第一項右邊的加號添加組件庫在項目沼琉，會自動安裝相關依賴到項目中
image.png
安裝插件時會出現(xiàn)選項北苟，到底是全部引入，還是按需引入打瘪，如果不修改的話友鼻，默認是全部引入，按需求選擇即可闺骚，還有一個選項是本地語言選擇彩扔，默認是中文
image.png
- 4.最后一步可視化操作界面會獲取相關文件的改動，你可以選擇提交修改（即添加到本地git版本管理）僻爽，或者是選擇跳過虫碉，就完成了本次添加插件的過程。
方式二
手動加入element-ui按需引入的相關文件胸梆，找到官方文檔開發(fā)指南快速上手部分敦捧，在項目中創(chuàng)建所需文件，腳手架使用的4.x所以對于babel的版本默認使用的是babel7.x版本碰镜，所以創(chuàng)建的文件是babel.config.js兢卵，不是.babelrc
- 1.安裝相關包
yarn add element-ui babel-plugin-component
- 2.項目根目錄創(chuàng)建babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
};
- 3.在你需要的文件中引入element-ui的組件，本文見main.js中引入
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫為
* Vue.use(Button)
* Vue.use(Select)
*/
- 4.在頁面中使用引入的element-ui組件
<template>
<div>
<el-button>el-button</el-button>
</div>
</template>
