手動(dòng)引入
// 1.安裝依賴-生產(chǎn)依賴
npm install element-ui -S
// main.js
import Vue from 'vue';
import ElementUI from 'element-ui'; // 2.1引入結(jié)構(gòu)
import 'element-ui/lib/theme-chalk/index.css'; // 2.2引入樣式
import App from './App.vue';
Vue.use(ElementUI); // 3.安裝
new Vue({
el: '#app',
render: h => h(App)
});
按需引入(推薦)：自動(dòng)（vue ui）方式
1.win + r 打開DOS窗口 鍵入 vue ui 回車打開圖形化界面
2.vue項(xiàng)目管理器勋功，打開（未打開過(guò)需要導(dǎo)入）項(xiàng)目
3.點(diǎn)擊 插件 -> 添加插件库说，進(jìn)入插件查詢面板
4.鍵入：vue-cli-plugin-element 點(diǎn)擊 -> 安裝 vue-cli-plugin-element
5.How do you want to import Element 選擇 import on demand（按需引入）
6.完成安裝后，打開項(xiàng)目骚揍，src/plugins/element.js 文件展示了 Button 組件的按需引入，若需要其他組件嘲叔，添加引入即可
按需引入生成代碼
//main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element.js'; // 引入js文件
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
// element.js 定義引入那些文件
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.use(Button);
// babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
// 解析
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};
按需引入：手動(dòng)方式
1.安裝 Element ui
npm install element-ui -S
2.安裝依賴
npm install babel-plugin-component -D
3.創(chuàng)建 element.js
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);
4.main.js 引入
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
