Element-ui
什麼是Element-ui？
根據官網的說法，Element-ui，是一套爲開發者、設計師和產品經理準備的基於Vue 2.0的由餓了麼公司出品的桌面端組件庫。
官網：https://element.eleme.cn/#/zh-CN
如何使用？
1、創建文件夾element-ui。
2、下載組件。
npm install vue #安裝Vue
npm i element-ui -S #安裝Element-ui
3、爲了代碼更加清爽，可以將主要依賴vue.min.js和element-ui包放入lib目錄中，lib目錄需手動創建。
4、搭建第一個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-開頭的標籤都是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>
官網基本組件測試
1、容器，拿來即用即可。
2、圖標，el內置了許多圖標，使用icon="iconname"屬性即可使用，也推薦使用https://fontawesome.dashgame.com/這個網站中的圖標。
<el-button @click="visible = true" icon="el-icon-search">Button</el-button>
3、對於後臺程序員來說，大部分情況下都是在對錶單進行操作。el幾乎內置了開發中會使用的所有表單組件。
前端怎麼寫？
對於一些後臺開發人員來說，可能會存在開發一個項目不知道怎麼開始第一步的問題，其原因大概是：
- 沒有清晰的界面定義。
- 不會設計數據庫。
對於第一個問題，Element-ui組件可以直接套用，我們平時可以多去看看其他網站如何設計，借鑑學習。至於第二個問題，其實也是因爲第一個問題沒解決，當我們把前端寫好之後，數據庫的結構自然就出來了。解決了這兩個問題，剩下的就是後臺的CRUD了，這是我們最熟悉的部分。
編寫前端的基本套路：
- 見過足夠多的組件，拼接組件，這樣就形成了網頁的基本形狀。
- 修改CSS即可。
設計多級下拉菜單的聯動效果
如下圖所示，現在要實現第一個下拉框選擇不同的選項時，第二個下拉框中的下拉選項也要隨之發生變化的效果，這時可以使用級聯選擇器（cascader）來實現。
<div class="block">
<span class="demonstration">默認 click 觸發子菜單</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 觸發子菜單</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: '設計原則',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反饋'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '導航',
children: [{
value: 'cexiangdaohang',
label: '側向導航'
}, {
value: 'dingbudaohang',
label: '頂部導航'
}]
}]
}
}
所有的前端彈窗建議都使用layer組件來實現。
vue-element-admin
什麼是vue-element-admin？
vue-element-admin是一款基於Vue和Element-ui的後臺管理的集成解決方案（60%的前後端分離項目都使用它）。
官網：https://panjiachen.github.io/vue-element-admin-site/zh/
如何分析一個前端項目？
1、查看config、index.js，瞭解項目的基本配置。
2、查看main.js，瞭解導入了哪些組件。
3、查看路由配置文件index.js，尋找到所有的頁面組件。
4、分析頁面組件，準備的組件化操作：template/script/style。
如何安裝？
官網建議我們使用淘寶鏡像來安裝依賴，否則可能會下載非常慢。
# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 進入項目目錄
cd vue-element-admin
# 安裝依賴
npm install
# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 本地開發 啓動項目
npm run dev
使用方法
1、vue-element-admin是一個完整的後臺腳手架，在平時開發的時候，把它當成一個工具庫來使用，需要什麼組件我們拿來使用即可。
2、推薦使用vue-admin-template來進行開發。
3、開發的步驟大概可以分爲：
- 編寫自己的組件。
- 註冊路由。
- 和後臺API進行通信和傳輸數據。