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针对DOM的应用实例(一)
Apr 15 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
JS图片预加载插件详解
Jun 21 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 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
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python中字符串前面加r的作用
2015/06/04 Python
Django框架反向解析操作详解
2019/11/28 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
2014新年寄语
2014/01/20 职场文书
班级安全教育实施方案
2014/02/23 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书