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

Web前端 潘老师 1年前 (2020-09-09) 1269 ℃ (0) 扫码查看

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

ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤
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

ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤
5、访问浏览器,点击按钮:
ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤

1、打开HBuildX,新建项目,选择如下:
ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤

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

npm run dev

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

注意:不是npm run serve,因为此项目中package.json中的启动脚本就是dev而不是serve

ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤
3、浏览器访问请求路径(路径在启动项目时会提示出来),点击按钮:
ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤
喜欢 (6)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!