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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django models.py应用实现过程详解
2019/07/29 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
北京大学自荐信范文
2014/01/28 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
个人简历自荐信
2014/06/26 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
师德承诺书2015
2015/04/28 职场文书