在HBuilder X中ElementUI框架的搭建

前言

        本文将详解基于Vue-cli脚手架搭建的项目如何使用ElementUI ？所以在学习本篇文章内容之前建议先学习vue-cli脚手架项目的搭建和学习

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

        ElementUI框架:

        Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组

件库

        Element UI 具有的显著特点：包含丰富的组件、易于定制、响应式设计、良好的文档和社区支持.

        Element UI 框架大大提高了前端开发的效率和质量，使得开发者能够更专注于业务逻辑的实现，而不必花费过多时间在基础组件的构建和样式调整上。

在项目中搭建并使用ElementUI组件

---

        1.通过npm安装

在vue.cil项目的终端输入命令: npm i element-ui -S

npm i element-ui -S

 

        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/