Element?UI安裝全過(guò)程
更新時(shí)間：2024年01月08日 15:49:38 作者：憶重愁
element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開(kāi)發(fā)了很多相關(guān)組件,方便我們快速開(kāi)發(fā)頁(yè)面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開(kāi)發(fā)并且進(jìn)行了開(kāi)源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過(guò)程,感興趣的朋友一起看看吧
Element UI
1.Element UI 引言
官網(wǎng): https://element.eleme.io/#/zh-CN
1.1 官方定義
Element - UI
1.2 定義
element ui 就是基于vue的一個(gè)ui框架,該框架基于vue開(kāi)發(fā)了很多相關(guān)組件,方便我們快速開(kāi)發(fā)頁(yè)面。
1.3 由來(lái)
餓了么前端團(tuán)隊(duì) 基于vue進(jìn)行開(kāi)發(fā)并且進(jìn)行了開(kāi)源 element ui 中提供全部都是封裝好組件。
餓了么
1.4 安裝Element UI
1.4.1 通過(guò)vue腳手架創(chuàng)建項(xiàng)目
1.4.2 在vue腳手架項(xiàng)目中安裝element ui
npm 安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。
1.下載element ui的依賴 npm i element-ui -S 2.指定當(dāng)前項(xiàng)目中使用element ui //在【main.js】中指定當(dāng)前項(xiàng)目中使用element ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //在vue腳手架中使用element ui Vue.use(ElementUI);
//在main.js中導(dǎo)入ElementUI插件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
//Vue.use用來(lái)安裝插件
//該方法需要在調(diào)用 new Vue() 之前被調(diào)用。
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')2.Layout(柵格)布局組件的使用
通過(guò)基礎(chǔ)的 24 分欄，迅速簡(jiǎn)便地創(chuàng)建布局
在element ui中布局組件將頁(yè)面劃分為多個(gè)行row ,每行最多分為24欄(列)
注意
- 在一個(gè)布局組件中是由 row 和 col 組合而成
- 在使用時(shí)要區(qū)分 row 屬性和 col 屬性
2.1 屬性的使用
行屬性使用
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>列屬性使用
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6" :offset="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
3.Container 布局容器組件
3.1 創(chuàng)建布局容器
<el-container></el-container>
3.2 容器中包含的子元素
<el-header>：頂欄容器。 <el-aside>：側(cè)邊欄容器。 <el-main>：主要區(qū)域容器。 <el-footer>：底欄容器。
3.3 容器的嵌套使用
<el-container>
<!-- 容器的嵌套使用 -->
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>3.4 水平與垂直容器
<el-container direction="vertical">
<!-- 水平與垂直容器的使用 -->
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container direction="horizontal">
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>注意：當(dāng)子元素中沒(méi)有有 el-header 或 el-footer 時(shí)容器排列為水平
3.5 子容器屬性
| 子容器 | 參數(shù) | 說(shuō)明 | 默認(rèn)值 |
|---|---|---|---|
| Header Attributes | height | 頂欄高度 | 60px |
| Aside Attributes | width | 側(cè)邊欄高度 | 300px |
| Footer Attributes | height | 底欄高度 | 60px |
4.Form相關(guān)組件
4.1 Radio單選框
4.1.1 創(chuàng)建按鈕
<template>
<el-radio v-model="radio" label="1">備選項(xiàng)</el-radio>
<el-radio v-model="radio" label="2">備選項(xiàng)</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>注意：在使用 radio 單選按鈕時(shí)，至少加入 v-model 和 label 兩個(gè)屬性
4.1.2 Radio按鈕屬性的使用
屬性的使用還是直接寫(xiě)在對(duì)應(yīng)的組件標(biāo)簽上以 屬性名 = 屬性值 的方式實(shí)現(xiàn)的。
4.1.3 Radio 事件的使用
事件的使用也是和屬性使用是一致，都是直接寫(xiě)在對(duì)應(yīng)的組件標(biāo)簽上
事件在使用時(shí)必須使用Vue中綁定事件方式進(jìn)行，使用如@事件名=事件處理函數(shù)(綁在在vue組件中對(duì)應(yīng)函數(shù))
<template>
<el-radio v-model="radio" @change="changeRadio" label="1">備選項(xiàng)1</el-radio>
<el-radio v-model="radio" @change="changeRadio" label="2">備選項(xiàng)2</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
},
methods: {
changeRadio(){
alert(this.radio2);
},
}
}
</script>4.1.4 Radio 按鈕組
<template>
<el-radio-group v-model="radio3">
<el-radio label="3">123</el-radio>
<el-radio label="6">12</el-radio>
<el-radio label="9">1</el-radio>
</el-radio-group>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
4.2 checkbox 多選框
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="復(fù)選框 A"></el-checkbox>
<el-checkbox label="復(fù)選框 B"></el-checkbox>
<el-checkbox label="復(fù)選框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="選中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<div>當(dāng)前復(fù)選框的值為：{{checkList}}</div>
</template>
<script>
export default {
data () {
return {
checkList:['復(fù)選框 A','選中且禁用'],
};
}
}
</script>4.3 Input 輸入框組件
4.3.1 創(chuàng)建 Input 組件
請(qǐng)輸入內(nèi)容
<el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>4.3.2 Input 組件屬性
<el-input v-model="inputmean" style="width:400px;" placeholder="普通輸入框"></el-input>
<br>
<el-input placeholder="可清空輸入框" v-model="inputmean" style="width:400px;" clearable></el-input>
<br>
<el-input placeholder="密碼輸入框" v-model="inputmean" style="width:400px;" show-password></el-input>
<br>
<!-- row為文本高度 -->
<el-input type="textarea" :rows="2" placeholder="請(qǐng)輸入內(nèi)容" v-model="inputmean" style="width:400px;margin:5px;"></el-input>
<br>
<el-input type="textarea" autosize placeholder="請(qǐng)輸入內(nèi)容" v-model="inputmean" style="width:400px;"></el-input>
4.3.3 Input 輸入事件的使用
<template>
<el-input
v-model="username"
@blur="aaa"
@focus="bbb"
@clear="clears"
clearable
@input="ccc"
placeholder="輸入框事件的綁定"
></el-input>
</template>
<script>
export default {
data () {
return {
username:'',
};
},
methods: {
aaa() {
console.log("失去焦點(diǎn)");
},
bbb() {
console.log("獲取焦點(diǎn)");
},
ccc(value) {
console.log("改變:" + value);
},
clears() {
console.log("清除");
},
}
}
</script>4.3.4 Input組件中方法的使用
<template>
<el-input v-model="username" ref="inputs" style="width: 400px"></el-input>
<el-button @click="focusInputs">focus方法</el-button>
<el-button @click="blurInputs">blur方法</el-button>
<el-button @click="selectInputs">select方法</el-button>
</template>
<script>
export default {
data () {
return {
username:'',
};
},
methods: {
focusInputs(){
this.$refs.inputs.focus();
},
blurInputs(){
this.$refs.inputs.blur();
},
selectInputs(){
this.$refs.inputs.select();
}
}
}
</script>在使用組件的方法時(shí)需要在對(duì)應(yīng)的組件中加入ref="組件別名”
在調(diào)用方法時(shí)直接使用this.$refs .組件別名.方法名()
4.4 Select 選擇器（下拉列表）組件的使用
4.4.1 Select 選擇器組件的創(chuàng)建
<template>
<div id="container">
<el-select v-model="value" placeholder="請(qǐng)選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<!-- 遍歷options數(shù)組 -->
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "select.vue",
data() {
return {
options: [
{
value: "選項(xiàng)1",
label: "黃金糕",
},
{
value: "選項(xiàng)2",
label: "雙皮奶",
},
{
value: "選項(xiàng)3",
label: "蚵仔煎",
},
],
value: "",
// value為當(dāng)前選定的值
};
},
};
</script>
<style>
</style>注意：1.要求下拉列表中必須存在option的value屬性值 ⒉.要求select中必須使用v-model進(jìn)行數(shù)據(jù)綁定
4.4.2 Select 組件的屬性
…
4.4.3 Select 組件事件的使用
4.5 Switch 組件的使用
4.5.1 Switch 組件的創(chuàng)建
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>4.5.2 Switch組件的屬性使用
4.5.3 Switch組件的事件使用
4.6 DateTimePicker 日期時(shí)間選擇器
4.6.1 DateTimerPicker 組件的創(chuàng)建
<template>
<div class="block">
<span class="demonstration">默認(rèn)</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="選擇日期時(shí)間">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
};
}
};
</script>4.6.2 DateTimerPicker 組件的屬性
4.7 Upload 組件
4.7.1 Upload 組件創(chuàng)建
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
>
<el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
<div slot="tip" class="el-upload__tip">
只能上傳jpg/png文件，且不超過(guò)500kb
</div>
</el-upload>注意:在使用upload組件時(shí)必須設(shè)置action屬性，action屬性為必要參數(shù)不能省略
4.7.2 Upload 組件屬性
4.8 Form 表單組件
4.8.1 Form 組件的創(chuàng)建
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活動(dòng)名稱">
<el-input v-model="form.name"></el-input>
</el-form-item>
........
<el-form-item>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "form.vue",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
};
</script>4.8.2 內(nèi)聯(lián)表單
當(dāng)垂直方向空間受限且表單較簡(jiǎn)單時(shí)，可以在一行內(nèi)放置表單。
<el-form :inline="true" :model="formInline" class="demo-form-inline">
........
</el-form>
<script>
export default {
data() {
return {}
},
methods: {
}
}
</script>4.8.3 Form 表單屬性
4.8.4 表單驗(yàn)證（失去焦點(diǎn)自動(dòng)驗(yàn)證）
<el-form :model="ruleForm" :rules="rules" >
<!-- 在rules屬性指定rules規(guī)則，才能使用規(guī)則 -->
<!-- 使用prop給組件傳參，通過(guò)rules中的命令參數(shù)來(lái)定義規(guī)則 -->
<el-form-item label="活動(dòng)名稱" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
name: "form.vue",
data() {
return {
ruleForm: {
name: "",
},
rules: {
name: [
{ required: true, message: "請(qǐng)輸入活動(dòng)名稱", trigger: "blur" },
{ min: 3, max: 5, message: "長(zhǎng)度在 3 到 5 個(gè)字符", trigger: "blur" },
],
},
};
},
};
</script>4.8.5 表單驗(yàn)證（失去焦點(diǎn)自動(dòng)驗(yàn)證）
<el-form :rules="rules" .... ref="ruleForm">
<!-- 在rules屬性指定rules規(guī)則，才能使用規(guī)則 -->
<!-- 使用prop給組件傳參，通過(guò)rules中的命令參數(shù)來(lái)定義規(guī)則 -->
<el-form-item label="活動(dòng)名稱" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item>
<!-- 提交時(shí)，傳遞了當(dāng)前組件的別名ruleForm，調(diào)用驗(yàn)證方法，在提交時(shí)還可以做驗(yàn)證 -->
<el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
name: "form.vue",
data() {
return {}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script> 5 Notice 組件
5.1 Alert 組件
5.1.1 Alert 組件的創(chuàng)建
<template>
<div id="container">
<el-alert title="成功提示的文案" type="success"> </el-alert>
<el-alert title="消息提示的文案" type="info"> </el-alert>
<el-alert title="成功提示的文案" type="success" effect="dark"> </el-alert>
<el-alert title="消息提示的文案" type="info" effect="dark"> </el-alert>
<el-alert title="自定義 close-text" type="info" close-text="知道了">
</el-alert>
</div>
</template>
<script>
export default {
name: "alert.vue",
};
</script>
<style>
#container .el-alert {
margin: 20px;
}
</style>5.1.2 Alert 組件的屬性
5.2 Message 消息提示組件
5.2.1 Message 組件的創(chuàng)建
<template>
<el-button :plain="true" @click="open">打開(kāi)消息提示</el-button>
<el-button :plain="true" @click="openVn">VNode</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message('這是一條消息提示');
},
openVn() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('span', null, '內(nèi)容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
}
}
}
</script>注意:這個(gè)組件的創(chuàng)建無(wú)須在頁(yè)面中書(shū)寫(xiě)任何標(biāo)簽,他是一個(gè)js插件,在需要展示消息提示的位置直接調(diào)用提供的js插件方法即可
6 表格組件
6.1 Table 組件
6.1.1 Table組件的創(chuàng)建
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="編號(hào)"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<el-table-column prop="email" label="郵箱"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "table.vue",
data() {
return {
tableData: [
{ id: 1, name: "小張", age: "20", email: "123456@qq.com" },
{ id: 2, name: "張", age: "20", email: "12345@qq.com" },
],
};
},
};
</script>6.1.2 表格中的屬性
到此這篇關(guān)于Element UI安裝教程的文章就介紹到這了,更多相關(guān)Element UI安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法,我們?cè)陂_(kāi)發(fā)過(guò)程中經(jīng)常會(huì)碰到數(shù)據(jù)更新,但是視圖并未改變的情況,需要的朋友可以參考下2023-08-08
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
今天小編就為大家分享一篇對(duì)vue中v-if的常見(jiàn)使用方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue通過(guò)ollama接口調(diào)用開(kāi)源模型實(shí)現(xiàn)人機(jī)對(duì)話功能
文章介紹了如何在本地安裝ollama并配置開(kāi)源大模型,以及如何通過(guò)JavaScript和Vue.js實(shí)現(xiàn)人機(jī)對(duì)話功能,感興趣的朋友一起看看吧
2024-11-11 
vue是一個(gè)mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。本文將通過(guò)示例詳解其中原理，需要的可以參考一下
2022-05-05 
下面小編就為大家分享一篇基于vue中css預(yù)加載使用sass的配置方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03 
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08 
Vue中.prettierrc文件的常見(jiàn)配置(淺顯易懂)
這篇文章主要介紹了Vue中.prettierrc文件的常見(jiàn)配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07