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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
初识Node.js
2015/03/20 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python爬虫实例详解
2018/06/19 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python编程中类与类的关系详解
2019/08/08 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
初二生物教学反思
2014/02/03 职场文书
五年级学生评语
2014/04/22 职场文书
爱国主义演讲稿
2014/05/07 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
英文自荐信范文
2015/03/25 职场文书