在HBuilder X中ElementUI框架的搭建

前言

        本文将详解基于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/