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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
javascript 精粹笔记
May 09 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
PHP静态类
2006/11/25 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php错误日志简单配置方法
2016/07/11 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python线程的两种编程方式
2015/04/14 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python中wx模块的具体使用方法
2020/05/15 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
应聘教师推荐信
2013/10/31 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
《口技》教学反思
2014/02/21 职场文书
出售房屋协议书范本
2014/10/06 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
工作一年自我鉴定
2019/06/20 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技