Element-UI使用基本介绍
Element-Ul是
饿了么
前端团队推出的一款基于Vue.js 2.0
的桌面端UI框架,手机端有对应框架是Mint UI 。
开发环境
1.安装webpack
npm install -g webpack
- 1
2.安装vue-cli
vue-cli是什么?
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。
使用步骤:
安装vue-cli:
npm install -g vue-cli
- 1
使用vue-cli构建项目
vue init webpack project-name //创建一个基于webpack模板的名为project-name的项目
- 1
目前可用的模板包括:
- browserify –全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
- browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
- webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
- webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
安装项目依赖
cd project-name //进入项目目录
npm install //安装项目依赖
npm run dev //运行项目- 1
- 2
- 3
此时在浏览器打开:localhost:8080即可看到欢迎页。
关于webpack和vue-cli的更多使用方法参见官方文档。
但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行
npm run build
- 1
搭建开发环境
本来想用vue-cli重新创建项目,试了几次总是出现各种问题,没办法成功。最后在仔细查看
Element-UI
的官方文档的 快速上手 部分的时候发现饿了么
团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下,结果成功了。所以,如果你不想太折腾的话,建议还是使用官方给的项目模板,可以省很多事。
第一步:安装项目模板
克隆/下载项目模板
将下载的模板放到你项目的根目录下
安装依赖
npm install
- 1
运行项目模板
npm run dev
- 1
此时在浏览器打开:localhost:8080即可看到欢迎页。
项目模板里已经把需要配置的文件都配置好了。
第二步:安装element-ui
第一步,我们成功安装了项目模板,接下来,我们需要安装element-ui到项目下。
npm i element-ui@next -D
- 1
开始使用
接下来我们就可以参照
Element-UI
的官方文档上手开发了。
例子
我们参照官方的按钮组件使用说明,在项目模板的基础上做一个按钮的例子。其它文件不需要改动,只修改App.vue文件的内容。代码如下:
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<el-button @click.native="startHacking">Let's do it</el-button>
<div class="block">
<span class="demonstration">显示默认颜色</span>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
<br/>
<div class="block">
<span class="demonstration">hover 显示颜色</span>
<span class="wrapper">
<el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button>
</span>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Use Vue 2.0 Today!'
}
},
methods: {
startHacking () {
this.$notify({
title: 'It Works',
message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
duration: 6000
})
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
效果如下图所示:
使用过程中碰到的问题:
1. phantomjs安装失败
由于源的问题,安装phantomjs必须要“搭梯子”,使用内网无法下载。所以解决的方法有两种:
方法一:通过科学上网,然后安装。
方法二:对于不知道怎么“搭梯子”的同学,可以通过更改源来下载,操作方法如下:
npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads
- 1
2.打开页面乱码
通过 Element-UI
官方提供的项目模板开发,会发现在浏览器打开页面的时候,中文是乱码的。如下图所示:
但html
页面中已经设置了<meta chartset='utf-8'>
。
仔细查看该页面所涉及的文件的编码格式的时候,发现引用的App.vue
文件的编码格式是GBK
,所以把该文件编码格式改为UTF-8
即可。
Element-UI使用基本介绍的更多相关文章
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Vue + Element UI 实现权限管理系统(第三方图标库)
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Element UI 框架搭建
Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
随机推荐
- LeetCode OJ:Combination Sum II (组合之和 II)
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- Week07《Java程序设计》第七次作业总结
Week07<Java程序设计>第七次作业总结 1. 本周学习总结 1.1 思维导图:Java图形界面总结 答: 1.2 可选:使用常规方法总结其他上课内容. 答: 1. Swing组件: ...
- 【linux】打包压缩命令
打包命令:tar\zip 压缩命令:gzip 打包文件 tar -zcvf xxx/ tar -xvf xxx.tar z的意思是通过gzip压缩 c是create是生成打包的意思,x是解包 v是压缩 ...
- 微信oauth2验证
微信公众号进行oauth2验证时的要求: 需要两个地方配置: (1) Oauth2验证链接中的appid.redirecturi (2) 微信公众号授权回调页面域名: Appid为公众号的ap ...
- 前端画图之iphoneSE主屏
今天逛园子,无意间看到一个用div+css画的Macbook Air的博客,瞬间想到很久之前我也做过类似的事, 而且,当时写完之后,真的是成就感爆棚啊!我去开源中国上翻到了我当时贴的源码,当时是在手机 ...
- android开发之eclipse调试debug模式详解
之前我写了一个相关的帖子,但是今天看了一个还是写的比我详细,于是我拿过来和大家分享. 1.在程序中添加一个断点 如果所示:在Eclipse中添加了一个程序断点 在Eclipse中一共有三种添加断 ...
- Lua基础---变量与赋值
看以下案例: test.lua -- 第一个lua脚本 --注释使用"--"符 --变量未定义时,默认初始化的值为nil --这样的定义为全局 num1 = 1 ; --加了关键字 ...
- 提高看log效率的小工具
文本型的log,比如Android的log,都是普通文本.在大家连续奋战的时候,难免看起来容易眼花. 这时候如何提高效率?我们给它搞个高亮好不好? 这就是我们要介绍的看log工具:TextAnalys ...
- remoting与socket、web service的比较及实例
remoting基础 一种分布式处理方式,可以说是DCOM的一种升级 跨过应用程序域,与另外的应用程序域进行通信,即穿越边界 在remoting中是通过通道(channel)来实现两个应用程序域之间对 ...
- Spring和MyBatis整合
前言:在前面一篇文章中,介绍了单独使用MyBatis连接orace的例子,在这里分享学习下Spring和MyBatis是如何整合的,以具体工程为例子 阅读目录: 1.环境准备 2.搭建工程 2.1.a ...