vue project - ElementUI按需引入
阿新 • • 發佈:2022-05-26
安裝按需引入包
npm install babel-plugin-component
babel.config.js:
按需引入配置
module.exports = { presets: [ '@vue/cli-plugin-babel/preset', //1.ElementUI 按需引入配置 ["@babel/preset-env", { "modules": false }] ], //2.ElementUI 按需引入配置 "plugins": [ [ "component", { "libraryName": "element-ui","styleLibraryName": "theme-chalk" } ] ] }
src/element/index.js:
把將要使用到的元件寫到一個js檔案中
// 匯入自己需要的元件 import {Select,Option,OptionGroup,Input,Tree,Dialog,Row,Col,Button} from 'element-ui' const element = { install: function (Vue) { Vue.use(Select) Vue.use(Option) Vue.use(OptionGroup) Vue.use(Input) Vue.use(Tree) Vue.use(Dialog) Vue.use(Row) Vue.use(Col) Vue.use(Button) } } exportdefault element
scr/main.js:
註冊使用element元件(src/element/index.js)
import Vue from 'vue' import App from './App.vue' //匯入將要使用的元件 import element from './element/index' //註冊將要使用的元件 Vue.use(element) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')