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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP安全上传图片的方法
2015/03/21 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
pandas中Timestamp类用法详解
2017/12/11 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
幼儿园教师请假制度
2014/01/16 职场文书
学生评语大全
2014/04/18 职场文书
汽车销售合同文本
2019/08/08 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers