步驟1：npm i element-ui -S

步驟2：npm install babel-plugin-component -D

步驟3：npm i @babel/preset-env -D

步驟4：本教程使用的 vue cli 版本為 4.5，@vue/cli 4.x 版本搭建的專案中會有 babel.config.js 配置檔案；如果是舊版的 vue-cli 腳手架工具建立的專案需要在 .babelrc 檔案中修改。

module.exports = {   "presets": [["@babel/preset-env", { "modules": false }]],   "plugins": [     [       "component",       {         "libraryName": "element-ui",         "styleLibraryName": "theme-chalk"       }     ]   ] }   步驟5：將按需引入的元件放到一個單獨的js，如src=>components=>elementui=>index.js import { Button, Input, Radio, Table, Form ,Dialog,MessageBox,Loading,Message,Notification} from "element-ui";
const coms = [Button, Input, Radio, Table, Form,Dialog]; Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;
export default {   install(Vue, options) {     coms.map((c) => {       Vue.component(c.name, c);     });   }, }; 步驟5：在 main.js 中引入自定義 element 外掛： import element from './components/elementui' Vue.use(element)