Element-UI使用指南
原网址:https://blog.csdn.net/u012285967/article/details/53023825
Element-UI是
饿了么
前端团队推出的一款基于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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
效果如下图所示:
使用过程中碰到的问题:
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
即可。
最新文章
- ASP.NET MVC的请求生命周期
- ID和Name的区别
- node.js 学习书籍推荐
- 索引服务混战ASP.NET――微软的又一个隔离墩
- How and Why Unsafe is Used in Java---reference
- 解决MySQL中文乱码的问题
- Eclipse 快捷键操作和常用设置
- C#读取和写入XML文件
- 用jquery+Asp.Net实现省市二级联动
- R语法学习 第十二篇:因子
- 从壹开始微服务 [ DDD ] 之十二 ║ 核心篇【下】:事件驱动EDA 详解
- 非阻塞读和写:str_cli函数
- 前后端分离djangorestframework——restful规范
- nlp基础(一)基本应用
- Sublime Text3快捷键大全
- 【转载】Direct3D HLSL介绍(上)
- makefile文件。批处理文件。
- PAT L1-017 到底有多二
- 检签 sub sup应用
- 十,PHP下载文件
热门文章
- CC攻击原理及防范方法
- android用户信息保存
- Python: Windows下pip安装库出错:Microsoft Visual C++ 9.0 is required <; Unable to find vcvarsall.bat
- Python全栈之路----数据类型—列表
- linux基础之系统管理类命令
- 关于ajax跨域的一些解决方案
- python 连接 oracle 统计指定表格所有字段的缺失值数
- [随笔][Life][咖啡][咖啡分类]
- vim 简单实用
- ehcache讲解及实例