一.UI组件
目的: 提高开发效率, 别人提供好一切, 拿过来直接用
饿了么团队开源一个基于vue组件库
Element-UI ==> pc端
文档: http://element-cn.eleme.io/#/zh-CN/component/installation
二.安装模板
$ vue init webpack element-demo
1.安装element-ui
$ npm install element-ui -save // 简写
// i ==> install
// S ==> --save
// D ==> --save-dev
三.全部引入Element-ui
1.在main.js引入 Element (全部引入)
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' // 使用插件
Vue.use(ElementUI)
2.然后就可以使用element-ui
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<el-button type="primary">主要按钮</el-button>
<el-button type="info">主要按钮</el-button>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
</div>
</template>
3.通过基础的 24 分栏,迅速简便地创建布局。
<el-row>
<el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
4.图标
<i class="el-icon-edit"></i>
5.按钮
<el-button type="info">主要按钮</el-button>
四.按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
安装 babel-plugin-component:
$ npm install babel-plugin-component --save-dev
$ npm install element-ui --save
1.将.babelrc 修改为:
{
"plugins": [
["component", {
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
2.如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue' Vue.use(Button)
Vue.use(Select) /* 或写为
* Vue.component(Button.name, Button)
* Vue.component(Select.name, Select)
*/ new Vue({
el: '#app',
render: h => h(App)
})