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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue配置接口域名方法总结
May 12 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
在python3中实现更新界面
2020/02/21 Python
Python中实现输入一个整数的案例
2020/05/03 Python
keras中的backend.clip用法
2020/05/22 Python
python实现数字炸弹游戏
2020/07/17 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
小学生母亲节演讲稿
2014/05/07 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Python实现生成bmp图像的方法
2021/06/13 Python