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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
设置器与访问器的定义以及各自特点
2016/01/08 面试题
小区门卫岗位职责
2013/12/31 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
动物科学专业求职信
2014/07/27 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年变电站工作总结
2014/12/19 职场文书
工程主管竞聘书
2015/09/15 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python