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椭圆旋转相册实现代码
Jan 16 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
浅谈javascript中return语句
Jul 15 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
javascript实现滚轮轮播图片
Dec 13 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新手上路(十三)
2006/10/09 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
python批量制作雷达图的实现方法
2016/07/26 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
教师节祝酒词
2015/08/11 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers