前端發(fā)展與現(xiàn)狀
大家都知道前端是由HTML压鉴、CSS、Js組成的锻拘，一開(kāi)始這樣寫(xiě)出來(lái)的頁(yè)面油吭，不能局部加載，復(fù)用性比較差署拟，重復(fù)工作比較多婉宰。微軟就推出了ifram標(biāo)簽，就是相當(dāng)于在網(wǎng)頁(yè)中嵌套一個(gè)網(wǎng)頁(yè)推穷，切換目錄只是切換ifram中的網(wǎng)頁(yè)心包，還是直接加載某個(gè)完整的html界面。接著ajax的出現(xiàn)馒铃，實(shí)現(xiàn)了局部刷新蟹腾，優(yōu)化了用戶(hù)體驗(yàn)。后來(lái)進(jìn)入了jQuery時(shí)代区宇，jQuery封裝了很多原生方法娃殖，減少了代碼量。現(xiàn)在我們前端進(jìn)入了前后端分離時(shí)代议谷，流行 MV* 框架（MVC炉爆、MVP、MVVM）卧晓，MVVM框架有Angular芬首、Vue、React逼裆。
現(xiàn)在我們后臺(tái)管理系統(tǒng)是基于Vue開(kāi)發(fā)的單頁(yè)面應(yīng)用（SPA）郁稍。
Vue簡(jiǎn)單介紹
1、Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web框架
2波附、Vue.js實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定和組件化
3艺晴、Vue.js只需要關(guān)系數(shù)據(jù)的變化，無(wú)需繁瑣的獲取和操作dom
比如給一個(gè)元素綁定事件并賦值掸屡，jQuery的做法是：
<input class="ipt" type="text">
<button class="btn"></button>
<script type="text/javascript">
$.ready(function () {
$('.ipt').value();
$('.btn').click(function() {
})
})
</script>
vue的寫(xiě)法是：
<input class="ipt" v-model="value" type="text">
<button class="btn" @click="click"></button>
.vue文件的寫(xiě)法
<template>
這里寫(xiě)HTML
</template>
<script type="text/ecmascript-6">
這里寫(xiě)數(shù)據(jù)和方法
</script>
<style lang="stylus" rel="stylesheet/stylus">
這里寫(xiě)css
</style>
項(xiàng)目結(jié)構(gòu)
├── build // 構(gòu)建相關(guān)
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── comm// 打包后生成的目錄
│ ├── favicon.ico
│ ├── index.html
│ └── static
├── config // 配置相關(guān)
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json //開(kāi)發(fā)生產(chǎn)依賴(lài)
├── server //服務(wù)及mock數(shù)據(jù)
│ ├── controller
│ └── mock
├── src //源代碼
│ ├── App.vue // 入口頁(yè)面
│ ├── api // 所有請(qǐng)求
│ ├── assets // 字體等靜態(tài)資源
│ ├── common // 全局公用方法
│ ├── components // 全局公用組件
│ ├── favicon.ico
│ ├── index.html // html模板
│ ├── main.js // 入口js 加載組件 初始化等
│ ├── pages // 所有頁(yè)面
│ ├── plugins // 全局工具
│ ├── router // 路由
│ └── store // 全局store管理
└── static // 第三方不打包資源
├── async.js
├── css
├── img
├── jquery-1.8.3.min.js
├── jquery.ztree.js
├── md5.js
├── paopao.js
├── spark-md5.js
├── tinymce
├── upload.js
├── upyun-mu.js
└── vue-style-loader
這里來(lái)簡(jiǎn)單講一下src文件
api 和 views
咱們公司后臺(tái)項(xiàng)目目前大概有十幾個(gè)api模塊封寞。隨著業(yè)務(wù)的迭代，模塊會(huì)越來(lái)越多仅财。所以這里根據(jù)業(yè)務(wù)模塊來(lái)劃分pages狈究，并且將pages 和 api 兩個(gè)模塊一一對(duì)應(yīng)，方便維護(hù)盏求，如下圖
這樣不管項(xiàng)目怎么累加抖锥，api和pages比較好維護(hù)亿眠。
components
這里的components放置的都是全局公用的一些組件，如上傳組件磅废，富文本等等纳像。
store
vex要根據(jù)需求去使用，咱們后臺(tái)項(xiàng)目來(lái)說(shuō)拯勉，雖然業(yè)務(wù)模塊比較多竟趾，還有權(quán)限，但業(yè)務(wù)之間的耦合度是很低的宫峦，所以根本沒(méi)有必要使用vuex來(lái)存儲(chǔ)data岔帽，每個(gè)頁(yè)面里存放自己的data就行。當(dāng)然有些數(shù)據(jù)還是需要用vuex來(lái)統(tǒng)一管理的导绷，如登錄,用戶(hù)信息犀勒，還是用vuex管理方便。
Router
路由這個(gè)概念最先是在后臺(tái)出現(xiàn)的妥曲，瀏覽器發(fā)出請(qǐng)求贾费，服務(wù)器根據(jù)請(qǐng)求，解析url路徑逾一，根據(jù)服務(wù)器的路由配置铸本，返回相應(yīng) html 字串肮雨。我們前端路由的實(shí)現(xiàn)本質(zhì)上就是檢測(cè) url 的變化遵堵，截獲 url 地址，然后解析來(lái)匹配路由規(guī)則怨规，每次 hash 值的變化陌宿，會(huì)觸發(fā) hashchange 這個(gè)事件，通過(guò)替換 DOM 的方式來(lái)實(shí)現(xiàn)頁(yè)面的切換波丰，還有通過(guò)HTML5的兩個(gè)api,pushState 和 replaceState實(shí)現(xiàn)記住路由壳坪。
router-view
<router-view> 是用來(lái)渲染路徑匹配到的組件。<router-view> 還可以?xún)?nèi)嵌<router-view>掰烟，實(shí)現(xiàn)路由嵌套爽蝴。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
最后
今天我只是給大家簡(jiǎn)單的說(shuō)了一下后臺(tái)管理的結(jié)構(gòu)和vue的簡(jiǎn)單知識(shí)，大家要是有興趣可以去了解一下纫骑，也可以隨時(shí)交流~
