前言

? ? ? ? 本文將詳解基于Vue-cli腳手架搭建的項目如何使用ElementUI ？所以在學習本篇文章內容之前建議先學習vue-cli腳手架項目的搭建和學習

使用HbuilderX快速搭建vue-cil項目https://mp.csdn.net/mp_blog/creation/editor/140043776

? ? ? ? ElementUI框架:

?

????????2.在main.js文件中引用ElementUI

?

? ? ? ? 代碼展示:?

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false

// 導入組件路由
import router from './router/index.js'
Vue.use(router);

// 導入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

new Vue({
? render: h => h(App),
? router,
}).$mount('#app')
?

? ? ? ? 3.導入組件測試

? ? ? ? ?在官方網站中任意找一個組件,將代碼復制粘貼到項目中的一個.vue組件中,并啟動運行項目。若在瀏覽器上可以正常顯示對應的UI組件，就表明ElementUi框架搭建成功.

ElementUI官方網站https://element.eleme.cn/

?