Vue2.0 UI框架ElementUI使用方法详解


Posted in Javascript onApril 14, 2017

今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来

首先我们使用windows件+r在输入框中输入cmd调用控制台(我写的会细一些方便让一些基础并不是那么好的人来学习,大神们谅解一下)

Vue2.0 UI框架ElementUI使用方法详解

Vue2.0 UI框架ElementUI使用方法详解

2.我在正式安装之前我会在电脑里面全局安装一个淘宝镜像,因为npm安装会很慢,安装完淘宝镜像之后所有的npm安装改为cnpm安装之后会快很多,在控制台中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

就可以了。

3.安装完淘宝镜像,我们将下载好的官方Demo解压下来通过控制台进入该文件夹的根目录下 

执行命令:cd 文件夹所在的根目录

执行安装命令:cnpm install

Vue2.0 UI框架ElementUI使用方法详解

安装完成:

Vue2.0 UI框架ElementUI使用方法详解

启动环境命令:cnpm run dev

启动成功:

Vue2.0 UI框架ElementUI使用方法详解

此时浏览器会自动弹出,localhost:8080就是运行的结果,启动成功之后我们如果想要研究这个Demo的结构我们进入根目录的src文件夹中找到对应的页面和组件,功能结合API就可以快速开发出团队想要的一个功能页面了,这个框架还有很多的方法需要我们去探索,之后有时间我会继续更新第二篇关于ElementUI的框架更深入的使用方法。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

本文转载于:http://blog.csdn.net/lixueninggg/article/details/70140158

Javascript 相关文章推荐
实现变速回到顶部的JavaScript代码
May 09 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 #Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 #Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 #Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 #Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 #Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 #Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 #Javascript
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP开发负载均衡指南
2010/07/17 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
实习评语
2013/12/16 职场文书
庆七一活动方案
2014/01/25 职场文书
高一化学教学反思
2014/02/05 职场文书
法人授权委托书格式
2014/04/08 职场文书
工程材料采购方案
2014/05/18 职场文书
三年级学生期末评语
2014/12/26 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书