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控件的相对独立性
Sep 03 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
js格式化时间小结
Nov 03 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
nodejs基础知识
2017/02/03 NodeJs
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
python魔法方法-自定义序列详解
2016/07/21 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python实现超市扫码仪计费
2018/05/30 Python
python url 参数修改方法
2018/12/26 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
估算杭州有多少软件工程师
2015/08/11 面试题
《落花生》教学反思
2014/02/25 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
综合素质评价自我评价
2015/03/06 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS