ElmentUI入门（1）——使用vue-cli集成ElementUI环境搭建步骤

1、介绍
Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI。

2、官网
ElementUI官网：https://element.eleme.cn/
官网使用教程：https://element.eleme.cn/2.0/#/zh-CN/component/installation

[v_act]1、说明：[/v_act]
1、官网使用教程中，具体介绍了各种安装方式，以及所有相关的组件，我们可以直接参考官网教程中的案例去学习即可，这篇文章我们主要就是介绍下如何去使用vue-cli集成ElementUI的开发环境。

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

2、想要使用vue-cli集成ElementUI的开发环境就必须先掌握vue-cli的使用，具体参考文章：Vue系列入门教程（6）——vue-cli脚手架

[v_act]2、集成步骤：[/v_act]
1、使用vue-cli创建名为first-app的vue项目。

2、打开first-app的终端，执行如下指令安装Element-UI：

npm i element-ui

3、完整引入整个 Element，修改 main.js 内容如下：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。如果想按需引入直接参考官方文档快速上手。
4、修改App.vue如下：

4、在终端执行如下指令运行：

npm run serve

5、访问浏览器，点击按钮：

1、打开HBuildX，新建项目，选择如下：

2、打开项目终端，运行如下指令启动项目：

npm run dev

[v_blue]注意：不是npm run serve，因为此项目中package.json中的启动脚本就是dev而不是serve[/v_blue]

3、浏览器访问请求路径（路径在启动项目时会提示出来），点击按钮：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问