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
1、说明:
1、官网使用教程中,具体介绍了各种安装方式,以及所有相关的组件,我们可以直接参考官网教程中的案例去学习即可,这篇文章我们主要就是介绍下如何去使用vue-cli集成ElementUI的开发环境。
2、想要使用vue-cli集成ElementUI的开发环境就必须先掌握vue-cli的使用,具体参考文章:Vue系列入门教程(6)——vue-cli脚手架
2、集成步骤:
1、使用vue-cli创建名为
first-app
的vue项目。
2、打开first-app
的终端,执行如下指令安装Element-UI
:
npm i element-ui
3、完整引入整个 Element
,修改 main.js
内容如下:
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如下:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <!-- Element-UI提供的按钮组件 --> <el-button type="primary" plain @click="handleClick">ElementUI主要按钮</el-button> </div> </template> <script> export default { name: 'App', methods:{ handleClick () { // Element-UI提供的通知方法$notify() this.$notify({ title: 'ElementUI成功工作', type: 'success', message: '我们已经成功引使用了ElementUI', duration: 5000 }) } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
4、在终端执行如下指令运行:
npm run serve
2、打开项目终端,运行如下指令启动项目:
npm run dev
注意:不是
npm run serve
,因为此项目中package.json中的启动脚本就是dev
而不是serve

3、浏览器访问请求路径(路径在启动项目时会提示出来),点击按钮:
