Vuejs实例-02Vue.js项目集成ElementUI
Vuejs实例-02Vue.js项目集成ElementUI
0:前言
vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView
和Element
.两个组件库,组件都很丰富。
官网的介绍
iView: 一套基于 Vue.js 的高质量 UI 组件库
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element。
1:安装
推荐使用 npm
的方式安装,它能更好地和 webpack
打包工具配合使用。我系统使用了淘宝镜像,所以需要安装的情况下,一般用cnpm
代替npm
$ cnpm i element-ui -S
安装完成之后,package.json
文件会增加element-ui
依赖。
"dependencies": {
"element-ui": "^1.3.3",
"vue": "^2.2.6",
"vue-router": "^2.3.1"
},
2:配置
配置文件,可以使用默认的。因为,在使用vue-cli
脚手架生成工具,生成项目的时候,已经帮我们配置好了。
3:引入
引入有两种方式,
1:完整引入。这种方法使用方便,但是会增大项目体积。
2:按需引入。这种方法需要安装插件,修改配置文件。使用的时候只需要引入需要的组件,减少项目体积。
完整引入
在main.js
中写入以下内容:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
以上代码便完成了Element
的引入。需要注意的是,样式文件需要单独引入。
按需引入
借助 babel-plugin-component
,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component
:
$ cnpm install babel-plugin-component -D
这个命令,会将babel-plugin-component
保存在开发环境的依赖包
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-component": "^0.9.1",
...
}
然后,将.babelrc修改为:
{
"presets": [
["env", { "modules": false }],
["es2015", { "modules": false }],
"stage-2"
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]],"transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
这是增加了Element-ui
和默认样式的类库插件
接下来,如果只需要引入部分组件,比如Button
和 InputNumber
, 那么需要在main.js
中写入以下内容:
import { Button, InputNumber } from 'element-ui'
Vue.use(Button)
Vue.use(InputNumber)
4:使用
至此,一个基于 Vue
和 Element
的开发环境已经搭建完毕,现在就可以编写代码了。
安装依赖:
$ cnpm install
启动开发模式:
$ npm run dev
如果要编译的话,使用:
$ npm run build
之后,就可以正常使用了。
5:测试
修改文件App.vue
通过增加三个按钮和input-number
,来测试用例。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
<br />
<el-input placeholder="elinput输入框">a</el-input>
<input placeholder="input输入框">b</input>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
num1: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
启动
$npm run dev
显示效果:
按需引入的效果。
完全引入的效果
这样说明,我们可以在项目中,正常使用了。
6:总结
ElementUI组件官网,写的很不错。如果项目中遇到有什么不明白的地方,多看两遍,也许会惊喜的发现问题答案。
7:源码
Vuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理系统
git项目源码
Vuejs实例-02Vue.js项目集成ElementUI的更多相关文章
- Vue.js项目集成ElementUI
Vuejs实例-02Vue.js项目集成ElementUI Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多 ...
- Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统
Vuejs2.0全家桶结合ELementUI制作后台管理系统 0: 系统环境的介绍 1: Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目 2: Vuejs实例-02Vue.js项目集 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- [Node.js] Node.js项目的持续集成
原文地址:http://www.moye.me/2016/03/03/nodejs_ci_by_jenkins 引子 持续集成 (Continuous Integration,简称CI)是一种软件工程 ...
- vue.js+koa2项目实战(一)创建项目和elementUI配置
前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.V ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版
vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- Node.js项目APM监控之New Relic
现在上一个项目,如果没有APM监控服务或应用的运行性能参数,等于是一架没有盲降系统的飞机正在盲降,结果会很悲催.出现了访问失效等问题时,都很难判定是性能瓶颈还是一个藏的深的bug,汇报的时候一顿眼晕, ...
随机推荐
- 关于WAMPserver配置httpd.conf无法修改根目录解决方法
最近在学习php开发, 在慕课网上先听了安装配置WAMP server的课,可是第二步配置网站根目录的地方就出错了,按照网课上讲的将httpd.conf文件中的 [Document] 和[Direct ...
- Java并发编程:线程控制
在上一篇文章中(Java并发编程:线程的基本状态)我们介绍了线程状态的 5 种基本状态以及线程的声明周期.这篇文章将深入讲解Java如何对线程进行状态控制,比如:如何将一个线程从一个状态转到另一个状态 ...
- rxjava2学习笔记(1)
1.什么是RxJava? 简单,清晰的多线程编程框架.可方便的写出维护性高,逻辑清晰的Java程序. 2.什么是观察者模式? 入门教程讲这种高大上抽象概念都是耍流氓! 3.开始 3.1github地址 ...
- 用swap函数交换两个整数
#include<stdio.h> //头文件 main() //主函数 { void swap(int *p,int *q); //声明 int a,b; //定义两个整数 int *p ...
- Spark入门实战
星星之火,可以燎原 Spark简介 Spark是一个开源的计算框架平台,使用该平台,数据分析程序可自动分发到集群中的不同机器中,以解决大规模数据快速计算的问题,同时它还向上提供一个优雅的编程范式,使得 ...
- Robotframe work学习之初(二)
一.F5帮助 Robot Framework 并没有像其它框架一样提供一份完整的 API 文档,所以,我们没办法通过官方 API文档进行习.RIDE 提供了 F5 快捷键来打开帮助文档. search ...
- 腾讯云安全:开发者必看|Android 8.0 新特性及开发指南
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 背景介绍 谷歌2017 I/O开发者大会今年将于5月17-19日在美国加州举办.大会将跟往年一样发布最新的 A ...
- 第八章 Hibernate数据操作技巧
第八章 Hibernate数据操作技巧8.1 分组统计数据 语法:[select]... from ...[where] [group by...[having...]] [order by ...
- Linux - IP数据报报头及个字段的意义
IP数据报的格式: IP 数据报的首部长度和数据长度都是可变长的,但总是4字节的整数倍. 对于IPv4 ,4位版本字段是4. (1)版本 占4位,指IP协议的版本.通信双方使用的IP协议版本必须一致. ...
- 自己实现的string的库函数
为了更好地理解string的各个库函数,现将几个常用的库函数用自己的方式实现如下: #include<iostream> using namespace std; #include< ...