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操作xml
Nov 04 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
Django使用多数据库的方法
Sep 06 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
Javascript中神奇的this
2016/01/20 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
layui文件上传实现代码
2017/05/20 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python3 操作符重载方法示例
2017/11/23 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
小学毕业感言50字
2014/02/16 职场文书
创业女性典型材料
2014/05/02 职场文书
教师求职自荐书
2014/06/14 职场文书
房屋产权证明书
2015/06/19 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
python获取对象信息的实例详解
2021/07/07 Python
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技