Element-ui
什么是Element-ui隧魄？
根據(jù)官網(wǎng)的說(shuō)法脓钾，Element-ui，是一套為開發(fā)者雇锡、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0的由餓了么公司出品的桌面端組件庫(kù)蟀给。
官網(wǎng)：https://element.eleme.cn/#/zh-CN
如何使用冰评？
1纫普、創(chuàng)建文件夾element-ui峭弟。
2攀芯、下載組件屯断。
npm install vue #安裝Vue
npm i element-ui -S #安裝Element-ui
3、為了代碼更加清爽侣诺，可以將主要依賴vue.min.js和element-ui包放入lib目錄中殖演，lib目錄需手動(dòng)創(chuàng)建。
4年鸳、搭建第一個(gè)UI界面入門程序趴久。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!-- 所有的el-開頭的標(biāo)簽都是elementui的組件！ -->
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return { visible: false }
}
})
</script>
</html>
官網(wǎng)基本組件測(cè)試
1搔确、容器彼棍，拿來(lái)即用即可。
2膳算、圖標(biāo)座硕，el內(nèi)置了許多圖標(biāo)，使用icon="iconname"屬性即可使用涕蜂，也推薦使用https://fontawesome.dashgame.com/這個(gè)網(wǎng)站中的圖標(biāo)华匾。
<el-button @click="visible = true" icon="el-icon-search">Button</el-button>
3、對(duì)于后臺(tái)程序員來(lái)說(shuō)宇葱，大部分情況下都是在對(duì)表單進(jìn)行操作瘦真。el幾乎內(nèi)置了開發(fā)中會(huì)使用的所有表單組件。
前端怎么寫黍瞧？
對(duì)于一些后臺(tái)開發(fā)人員來(lái)說(shuō)诸尽，可能會(huì)存在開發(fā)一個(gè)項(xiàng)目不知道怎么開始第一步的問(wèn)題，其原因大概是：
- 沒(méi)有清晰的界面定義印颤。
- 不會(huì)設(shè)計(jì)數(shù)據(jù)庫(kù)您机。
對(duì)于第一個(gè)問(wèn)題，Element-ui組件可以直接套用年局，我們平時(shí)可以多去看看其他網(wǎng)站如何設(shè)計(jì)际看，借鑒學(xué)習(xí)。至于第二個(gè)問(wèn)題矢否，其實(shí)也是因?yàn)榈谝粋€(gè)問(wèn)題沒(méi)解決仲闽，當(dāng)我們把前端寫好之后，數(shù)據(jù)庫(kù)的結(jié)構(gòu)自然就出來(lái)了僵朗。解決了這兩個(gè)問(wèn)題赖欣，剩下的就是后臺(tái)的CRUD了屑彻，這是我們最熟悉的部分。
編寫前端的基本套路：
- 見過(guò)足夠多的組件顶吮，拼接組件社牲，這樣就形成了網(wǎng)頁(yè)的基本形狀。
- 修改CSS即可悴了。
設(shè)計(jì)多級(jí)下拉菜單的聯(lián)動(dòng)效果
如下圖所示搏恤，現(xiàn)在要實(shí)現(xiàn)第一個(gè)下拉框選擇不同的選項(xiàng)時(shí)，第二個(gè)下拉框中的下拉選項(xiàng)也要隨之發(fā)生變化的效果湃交，這時(shí)可以使用級(jí)聯(lián)選擇器（cascader）來(lái)實(shí)現(xiàn)熟空。
<div class="block">
<span class="demonstration">默認(rèn) click 觸發(fā)子菜單</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 觸發(fā)子菜單</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>
<script>
export default {
data() {
return {
value: [],
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '設(shè)計(jì)原則',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反饋'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '導(dǎo)航',
children: [{
value: 'cexiangdaohang',
label: '側(cè)向?qū)Ш?
}, {
value: 'dingbudaohang',
label: '頂部導(dǎo)航'
}]
}]
}
}
所有的前端彈窗建議都使用layer組件來(lái)實(shí)現(xiàn)。
vue-element-admin
什么是vue-element-admin巡揍？
vue-element-admin是一款基于Vue和Element-ui的后臺(tái)管理的集成解決方案（60%的前后端分離項(xiàng)目都使用它）痛阻。
官網(wǎng)：https://panjiachen.github.io/vue-element-admin-site/zh/
如何分析一個(gè)前端項(xiàng)目？
1腮敌、查看config、index.js俏扩，了解項(xiàng)目的基本配置糜工。
2、查看main.js录淡，了解導(dǎo)入了哪些組件捌木。
3、查看路由配置文件index.js嫉戚，尋找到所有的頁(yè)面組件刨裆。
4、分析頁(yè)面組件彬檀，準(zhǔn)備的組件化操作：template/script/style帆啃。
如何安裝？
官網(wǎng)建議我們使用淘寶鏡像來(lái)安裝依賴窍帝，否則可能會(huì)下載非常慢努潘。
# 克隆項(xiàng)目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 進(jìn)入項(xiàng)目目錄
cd vue-element-admin
# 安裝依賴
npm install
# 建議不要用 cnpm 安裝 會(huì)有各種詭異的bug 可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題
npm install --registry=https://registry.npm.taobao.org
# 本地開發(fā) 啟動(dòng)項(xiàng)目
npm run dev
使用方法
1、vue-element-admin是一個(gè)完整的后臺(tái)腳手架坤学，在平時(shí)開發(fā)的時(shí)候疯坤，把它當(dāng)成一個(gè)工具庫(kù)來(lái)使用，需要什么組件我們拿來(lái)使用即可深浮。
2压怠、推薦使用vue-admin-template來(lái)進(jìn)行開發(fā)。
3飞苇、開發(fā)的步驟大概可以分為：
- 編寫自己的組件菌瘫。
- 注冊(cè)路由洋闽。
- 和后臺(tái)API進(jìn)行通信和傳輸數(shù)據(jù)。
