7-1 Element UI及Vuex-Element UI
目录：
- 简介
- 快速上手
- 使用element-ui组件
- 按需引入组件
一、简介
Element UI是饿了么团队提供的一套基于 Vue2.0的组件库，可以快速搭建网站，提高开发效率。
饿了么提供组件库：1.PC端：Element UI 2.移动端：MinUl
Element UI官网：https://element.eleme.cn/#/zh-CN => 使用：组件下都有，这边只是简单的演示
二、快速上手
2.1、安装element-ui插件
说明： -S表示生产依赖
>npm i element-ui -S
2.2、在main.js中引入使用组件
说明：这种方式的引入了element-ui中的所有的组件
import Vue from 'vue';
import App from './App.vue';
//引入element-ui的js库
import ElementUI from 'element-ui';
//引入element-ui的css库
import 'element-ui/lib/theme-chalk/index.css';
//引用完成之后需要使用element-ui
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
2.3、在webpack.config.js中添加loader
我们安装完之后，还需要再webpack的配置文件中配置我们所需要加载的loader，这个需要我们自己配置。css样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader、file-loader等。
默认情况下webpack-simple项目模板，并没有 style-loader和file-loader模块，所以需要单独安装，安装如下:
>npm install style-loader --save-dev #element-ui2.13.0版本不需要，弃用 >npm install file-loader --save-dev
在 webpack.config.js中添加style-loader和file-loader：
.....
module.exports = {
entry: './src/main.js',
output: {
.....
},
module: {
rules: [
.....,
{
test:/\.css$/, //#element-ui2.13.0版本不需要,老版本需要，弃用
loader:'style-loader!css-loader' // !号表示级联，表示style-loader和css-loader都需要使用
},
{
test:/\.(eot|svg|ttf|woff|woff2)(\?\$*)?$/,
loader: 'file-loader'
}
]
},
......
}
注意：修改完webpack.config.js之后需要重启 webpack项目。
三、使用element-ui组件
在element-ui的组件中都有详细的说明组件的使用，详细使用地址如下：https://element.eleme.cn/#/zh-CN/component，接下来我们就列举几个经常用的，更多使用请查看官网。
3.1、图标和按钮
在App.vue中直接调用：
<template>
<div id="app">
<!--按钮-->
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<br>
<!--带图标的按钮-->
<el-button type="primary" icon="el-icon-edit">编辑</el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<br>
<!--图标-->
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
</div>
</template>
<script>
//js代码
</script>
<style>
//css样式
</style>
3.2、Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。el-row：表示行，el-col 表示列 => 一共加起来 是24列
<template>
<div id="app">
<!--布局 el-row下的:span的总和是24-->
<el-row>
<el-col :span="8" class="grid">欢迎</el-col>
<el-col :span="8" class="grid">来到</el-col>
<el-col :span="8" class="grid">高哥哥博客园</el-col>
</el-row>
<el-row>
<el-col :span="6" class="grid">欢迎</el-col>
<el-col :span="6" class="grid">来到</el-col>
<el-col :span="6" class="grid">高哥哥</el-col>
<el-col :span="6" class="grid">博客园</el-col>
</el-row>
</div>
</template>
<script>
//js代码
</script>
<style>
.grid {
border: 1px solid #ccc;
font-size: 20px;
}
</style>
3.3、日期组件
在components目录下DatePicker.vue
<template>
<div class="block">
<el-date-picker
v-model="value"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data(){
return {
value: '',
pickerOptions:{
disabledDate(time) { //参数time表示当前时间，禁止哪些日期不能用
return time.getTime() <= Date.now();
},
}
}
}
}
</script>
在App.vue中引入：
<template>
<div id="app">
<!--日期-->
<hr>
<DatePicker></DatePicker>
</div>
</template>
<script>
//导入模块
import DatePicker from './components/DatePicker.vue'
export default {
name: 'app',
components:{
DatePicker //注册导入的模块
}
}
</script>
<style>
//css
</style>
3.4、上传组件
在components目录下Upload.vue
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data(){
return {
fileList: [{
name: 'food.jpeg', url: ''},
{name: 'food2.jpeg', url: ''}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
}
</script>
在App.vue中引入：
<template>
<div id="app">
<!--上传-->
<hr>
<Upload></Upload>
</div>
</template>
<script>
import Upload from './components/Upload.vue'
export default {
name: 'app',
components:{
Upload
}
}
</script>
<style>
.grid {
border: 1px solid #ccc;
font-size: 20px;
}
</style>
四、使用less样式
使用样式的时候，我们可以使用动态的lcss，比如说less。
条件：安装loader，需要2个：less，less-loader
>npm install less less-loader -D
在webpack.config.js中添加loader
.......
module.exports = {
....,
module: {
rules: [
.....,
{
test:/\.less$/,
loader: 'less-loader'
}
]
},
.....
}
在App.vue等组件中使用：
<template>
//html代码
</template>
<script>
//js代码
</script>
<style lang="less"> /*必须要指定lang='less'*/
.grid {
border: 1px solid #ccc;
font-size: 20px;
color: @color;
.h(50px);
}
@color:red;
.h(@height){
height:@height;
}
</style>
五、按需引入组件
4.1、安装abel-plugin-component
>npm install babel-plugin-component -D
4.2、配置 .babelrc
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
4.3、只引入需要的插件
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
浙公网安备 33010602011771号