vue項(xiàng)目基礎(chǔ)結(jié)構(gòu)

一個(gè)vue的項(xiàng)目，我覺(jué)得最小的子集其實(shí)就是{vue,vue-router,component}，vue作為基礎(chǔ)庫(kù)，為我們提供雙向綁定等功能。vue-router連接不同的"頁(yè)面"，component作為樣式或者行為輸出，你可以通過(guò)這三個(gè)東西來(lái)實(shí)現(xiàn)最基本的靜態(tài)SPA網(wǎng)站。當(dāng)然我在這里不談vue全家桶這樣寬泛的概念，我會(huì)如數(shù)家珍的把主要的技術(shù)點(diǎn)一一列舉。

1.vue-cli：搭建基本的vue項(xiàng)目骨架，腳手架工具

2.sass-loader&node-sass:我是使用的sass作為樣式的預(yù)編譯工具，兩者缺一不可，大家也可以自行選擇，less,stylus都可以

3.postcss:實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵，px=>rem。大漠已經(jīng)提出了基于vw,vh的布局方案，不過(guò)我暫時(shí)持觀望態(tài)度。

4.vuex:管理復(fù)雜的數(shù)據(jù)流向，狀態(tài)機(jī)工具，特化的Flux

5.vuex-persistedstate:將vuex中state持久化的工具

6.vue-router:實(shí)現(xiàn)SPA間“頁(yè)面”之間的跳轉(zhuǎn)

7.vue-lazyload:實(shí)現(xiàn)圖片的懶加載，優(yōu)化http傳輸性能

8.vue-awesome-swiper:輪播功能的實(shí)現(xiàn)及一些特殊切換效果的完成

9.better-scroll:實(shí)現(xiàn)列表滾動(dòng)及父子組件間的滾動(dòng)問(wèn)題

10.axios:http工具，實(shí)現(xiàn)向API請(qǐng)求數(shù)據(jù)，以及攔截器的實(shí)現(xiàn)

11.fastclick:解決300ms延遲的庫(kù)

以上這些，都是我覺(jué)得一個(gè)中大型的vue項(xiàng)目需要用到的，還有一些比如我在實(shí)現(xiàn)圖片上傳中用到了jsx的語(yǔ)法，需要babel-jsx這樣的東西，不具有普適性，就不例舉了。

下面簡(jiǎn)述一下上面說(shuō)到的這些東西，有的東西會(huì)單獨(dú)的來(lái)出來(lái)細(xì)說(shuō)：

1.vue-cli：

https://github.com/vuejs/vue-cli

腳手架工具，當(dāng)我們選擇vue作為我們的開(kāi)發(fā)技術(shù)棧以后，就要開(kāi)始為我們的項(xiàng)目搭建目錄及開(kāi)發(fā)的環(huán)境。安裝好node以后，通過(guò)以后命令進(jìn)行安裝

npm install -g vue-cli 將vue-cli安裝到全局環(huán)境

vue init webpack my-vue-demo 創(chuàng)建基于webpack模板的名為my-vue-demo文件名的vue項(xiàng)目

這里的模板有6中，不過(guò)我們比較常用的就是webpack了。

期間你會(huì)看到有一些例如e2e這樣的單元測(cè)試的工具和ESLint檢測(cè)代碼質(zhì)量的工具，我覺(jué)得都是可以不必安裝的。

那么，其實(shí)我們最關(guān)心的就是在src文件夾下面的內(nèi)容了?？梢钥聪聢D

上圖就是一個(gè)在刨除vue-cli的基本結(jié)構(gòu)，在項(xiàng)目上比較成熟的vue骨架了。

2&3 :sass,postcss

直接寫(xiě)css得洪荒時(shí)代已經(jīng)過(guò)去了，預(yù)編譯的樣式處理器幫助我們解放了生產(chǎn)力，提高了效率。sass,less,stylus各有優(yōu)缺，也各有信徒。

要使用sass的話(huà)，你需要安裝一下sass-loader和node-sass，不過(guò)node-sass不是很好裝，被墻的厲害，建議還是用taobao的鏡像。如果安裝完成后還是報(bào)錯(cuò)無(wú)法解析的話(huà)，你可能就需要去webpack.base.conf.js里去看看是否設(shè)置好了對(duì)應(yīng)的loader。

postcss的常用功能

px2rem => 可以幫助我們實(shí)現(xiàn)px到rem單位的轉(zhuǎn)換，只需要你定義好相應(yīng)的轉(zhuǎn)換標(biāo)準(zhǔn)就可以了。

autoprefixer => 兼容性的處理postcss也可以幫我們處理好。

//vue-loader.conf.js
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap,
 extract: isProduction
 }),
 postcss: [
 require('autoprefixer')({
 browsers: ['iOS >= 7', 'Android >= 4.1']
 }),
 require('postcss-px2rem')
 ({ remUnit: 64 })
 ]
}

4,5:vuex,vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate

一個(gè)中大型的vue項(xiàng)目，肯定有復(fù)雜的狀態(tài)需要去管理。簡(jiǎn)單的event bus已經(jīng)不再適用了。

特化的Flux架構(gòu)，vuex就迎頭頂上。簡(jiǎn)而言之：他就是我們處理無(wú)論是用戶(hù)操作，API返回，URL變更等多重操作的狀態(tài)管理工具。以后我會(huì)具體的說(shuō)下vuex。

用過(guò)vuex的人，會(huì)發(fā)現(xiàn)一個(gè)很痛苦的地方，就是vuex里面的state，只要我們?nèi)ニ⑿?，它就被釋放掉了。有的狀態(tài)還好，沒(méi)有了大不了我們可以讓用戶(hù)去重新操作一遍。但是像登錄這樣的操作，你不可能讓用戶(hù)刷一下就去登一下吧。當(dāng)然，你會(huì)說(shuō)，我們可以存到local啊，cookie里面啊。是可以！但是這樣的話(huà),state就和local里的數(shù)據(jù)形成了一種松散的關(guān)聯(lián)，state顯得十分的脆弱，因?yàn)槟銦o(wú)法預(yù)知你什么時(shí)候會(huì)少寫(xiě)一個(gè)setStore這樣的方法。vuex-persistedstate幫我們解決了這樣的問(wèn)題，它幫我們直接把state映射到了本地的緩存環(huán)境，我們可以在computed里面用vuex提供的mapState輔助函數(shù)，來(lái)動(dòng)態(tài)的更新local里面的數(shù)據(jù)。而不需要持久化的state，我們依舊可以刷新來(lái)釋放掉。

6.vue-router

當(dāng)我們使用vue來(lái)構(gòu)建SPA的應(yīng)用時(shí)，就等于說(shuō)我們完全的分離了前后端?；蛘咄ㄋc(diǎn)的說(shuō)：這就是一個(gè)純前端的項(xiàng)目。后端僅僅提供數(shù)據(jù)，任何的邏輯都在前端實(shí)現(xiàn)。既然"脫離"了后端，那么肯定就沒(méi)有request Mapping這樣的同步映射url了。那么，前端就需要router來(lái)實(shí)現(xiàn)我們前端"頁(yè)面"的跳轉(zhuǎn)。vue-router就幫我們做了這樣的事情，他提供給了路由守衛(wèi)給我們，我們可以設(shè)置全局的，組件內(nèi)的路由守衛(wèi)，來(lái)實(shí)現(xiàn)特定的業(yè)務(wù)邏輯。 提供過(guò)渡動(dòng)畫(huà)，來(lái)更加生動(dòng)的展示SPA應(yīng)用應(yīng)有的風(fēng)采等等，這個(gè)以后也要具體的來(lái)說(shuō)。

7.vue-lazyload

https://github.com/hilongjw/vue-lazyload

實(shí)現(xiàn)圖片的懶加載。這是前端性能優(yōu)化的一個(gè)必須面對(duì)的問(wèn)題：圖片。懶加載可以減少請(qǐng)求的數(shù)量，而且在很直觀的視覺(jué)上，也有一個(gè)良好的過(guò)渡。當(dāng)然，圖片我們也是需要去做一些處理的，使用webp格式來(lái)減小圖片的質(zhì)量，或者通過(guò)oss來(lái)對(duì)圖片作處理。

8.vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

通過(guò)它可以實(shí)現(xiàn)基本輪播，橫軸的切換，橫軸的列表滾動(dòng)等。

例如我要去實(shí)現(xiàn)四個(gè)tab切換這樣的功能，但是簡(jiǎn)單的display這樣的效果我又覺(jué)得不是很滿(mǎn)意。那么我們就可以通過(guò)swiper來(lái)實(shí)現(xiàn)，每次tab里面的content都會(huì)對(duì)應(yīng)swiper的一個(gè)swiper-item。切換的tab，其實(shí)就是swiper里面的next page或者before page.

data(){
　　return{
　　　　swiperOption: {
  slidesPerView :'auto',
  direction: 'horizontal',
  freeMode : true,
  loop: false,
  spaceBetween: 20,
 　　　},
 }
}

<swiper :options="swiperOption" ref="swiper" v-if="list&& list.length !== 0">
  <swiper-slide v-for="(item,index) in list" :key="index" class="hot-item">
  <router-link :to="{name:'quickCar',params:{carID:item.CarID}}" class="description_car">
  <img v-lazy="item.Attachments.length !==0 && item.Attachments[0].FilePath"/>
   <span>&yen;{{item.price}}/日</span>
  </router-link>
  </swiper-slide>
 </swiper>
 <p class="noData" v-else></p>

9.better-scroll

https://github.com/ustbhuangyi/better-scroll

實(shí)現(xiàn)縱軸列表的滾動(dòng)，以及當(dāng)有嵌套的路由的時(shí)候，通過(guò)better-scroll來(lái)實(shí)現(xiàn)的禁止父路由隨著子路由的滾動(dòng)的問(wèn)題。

better-scroll其實(shí)也可以去實(shí)現(xiàn)橫軸的滾動(dòng)，但是為什么不使用better-scroll來(lái)處理呢？這是因?yàn)樵赽etter-scroll實(shí)現(xiàn)橫軸滾動(dòng)的時(shí)候，我們無(wú)法在better-scorll的content的內(nèi)容區(qū)域里去下向拉動(dòng)我們的頁(yè)面。所以導(dǎo)致的一個(gè)Bug就是，在better-scroll橫軸滾動(dòng)的區(qū)域里，頁(yè)面動(dòng)不了了。

如上圖：橫軸滾動(dòng)下面還有內(nèi)容，但是在圖片所示的區(qū)域里面，無(wú)法向下拉動(dòng)。所以橫軸的滾動(dòng)其實(shí)也是通過(guò)vue-awesome-swiper來(lái)實(shí)現(xiàn)的。

10.axios

基本功能就是通過(guò)axios來(lái)請(qǐng)求后臺(tái)接口的數(shù)據(jù)。并且axios可以配合router更好的實(shí)現(xiàn)類(lèi)似后臺(tái)的攔截器的功能，例如處理token過(guò)期這樣問(wèn)題。因?yàn)楫?dāng)token過(guò)期的時(shí)候，僅僅通過(guò)vue-router的router.beforeEach來(lái)處理就有點(diǎn)無(wú)能為力了。這時(shí)候就需要配合后臺(tái)響應(yīng)返回的code來(lái)進(jìn)行url的處理。

11.fastclick

解決點(diǎn)透和點(diǎn)擊延時(shí)的問(wèn)題http://www.dbjr.com.cn/article/131369.htm

最新評(píng)論