vue項目的骨架及經常使用組件介紹

vue項目基礎結構

一個vue的項目，我以爲最小的子集其實就是{vue,vue-router,component}，vue做爲基礎庫，爲咱們提供雙向綁定等功能。vue-router鏈接不一樣的"頁面"，component做爲樣式或者行爲輸出，你能夠經過這三個東西來實現最基本的靜態SPA網站。固然我在這裏不談vue全家桶這樣寬泛的概念，我會如數家珍的把主要的技術點一一列舉。

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

2.sass-loader&node-sass:我是使用的sass做爲樣式的預編譯工具，二者缺一不可，你們也能夠自行選擇，less,stylus均可以

3.postcss:實現響應式佈局的關鍵，px=>rem。大漠已經提出了基於vw,vh的佈局方案，不過我暫時持觀望態度。

4.vuex:管理複雜的數據流向，狀態機工具，特化的Flux

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

6.vue-router:實現SPA間「頁面」之間的跳轉

7.vue-lazyload:實現圖片的懶加載，優化http傳輸性能

8.vue-awesome-swiper:輪播功能的實現及一些特殊切換效果的完成

9.better-scroll:實現列表滾動及父子組件間的滾動問題

10.axios:http工具，實現向API請求數據，以及攔截器的實現

11.fastclick:解決300ms延遲的庫

以上這些，都是我以爲一箇中大型的vue項目須要用到的，還有一些好比我在實現圖片上傳中用到了jsx的語法，須要babel-jsx這樣的東西，不具備普適性，就不例舉了。

 

 下面簡述一下上面說到的這些東西，有的東西會單獨的來出來細說：

1.vue-cli：

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

腳手架工具，當咱們選擇vue做爲咱們的開發技術棧之後，就要開始爲咱們的項目搭建目錄及開發的環境。安裝好node之後，經過之後命令進行安裝

npm install -g vue-cli 將vue-cli安裝到全局環境

vue init webpack my-vue-demo 建立基於webpack模板的名爲my-vue-demo文件名的vue項目

這裏的模板有6中，不過咱們比較經常使用的就是webpack了。

期間你會看到有一些例如e2e這樣的單元測試的工具和ESLint檢測代碼質量的工具，我以爲都是能夠沒必要安裝的。

那麼，其實咱們最關心的就是在src文件夾下面的內容了。能夠看下圖

上圖就是一個在刨除vue-cli的基本結構，在項目上比較成熟的vue骨架了。

2&3 :sass,postcss

直接寫css得洪荒時代已通過去了，預編譯的樣式處理器幫助咱們解放了生產力，提升了效率。sass,less,stylus各有優缺，也各有信徒。

要使用sass的話，你須要安裝一下sass-loader和node-sass，不過node-sass不是很好裝，被牆的厲害，建議仍是用taobao的鏡像。若是安裝完成後仍是報錯沒法解析的話，你可能就須要去webpack.base.conf.js裏去看看是否設置好了對應的loader。

postcss的經常使用功能

px2rem => 能夠幫助咱們實現px到rem單位的轉換，只須要你定義好相應的轉換標準就能夠了。

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 })
  ]
}

View Code

 

4,5:vuex,vuex-persistedstate

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

一箇中大型的vue項目，確定有複雜的狀態須要去管理。簡單的event bus已經再也不適用了。

特化的Flux架構，vuex就迎頭頂上。簡而言之：他就是咱們處理不管是用戶操做，API返回，URL變動等多重操做的狀態管理工具。之後我會具體的說下vuex。

用過vuex的人，會發現一個很痛苦的地方，就是vuex裏面的state，只要咱們去刷新，它就被釋放掉了。有的狀態還好，沒有了大不了咱們可讓用戶去從新操做一遍。可是像登陸這樣的操做，你不可能讓用戶刷一下就去登一下吧。固然，你會說，咱們能夠存到local啊，cookie裏面啊。是能夠！可是這樣的話,state就和local裏的數據造成了一種鬆散的關聯，state顯得十分的脆弱，由於你沒法預知你何時會少寫一個setStore這樣的方法。vuex-persistedstate幫咱們解決了這樣的問題，它幫咱們直接把state映射到了本地的緩存環境，咱們能夠在computed裏面用vuex提供的mapState輔助函數，來動態的更新local裏面的數據。而不須要持久化的state，咱們依舊能夠刷新來釋放掉。

6.vue-router

當咱們使用vue來構建SPA的應用時，就等於說咱們徹底的分離了先後端。或者通俗點的說：這就是一個純前端的項目。後端僅僅提供數據，任何的邏輯都在前端實現。既然"脫離"了後端，那麼確定就沒有request Mapping這樣的同步映射url了。那麼，前端就須要router來實現咱們前端"頁面"的跳轉。vue-router就幫咱們作了這樣的事情，他提供給了路由守衛給咱們，咱們能夠設置全局的，組件內的路由守衛，來實現特定的業務邏輯。 提供過渡動畫，來更加生動的展現SPA應用應有的風采等等，這個之後也要具體的來講。

7.vue-lazyload

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

實現圖片的懶加載。這是前端性能優化的一個必須面對的問題：圖片。懶加載能夠減小請求的數量，並且在很直觀的視覺上，也有一個良好的過渡。固然，圖片咱們也是須要去作一些處理的，使用webp格式來減少圖片的質量，或者經過oss來對圖片做處理。

8.vue-awesome-swiper

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

經過它能夠實現基本輪播，橫軸的切換，橫軸的列表滾動等。

例如我要去實現四個tab切換這樣的功能，可是簡單的display這樣的效果我又以爲不是很滿意。那麼咱們就能夠經過swiper來實現，每次tab裏面的content都會對應swiper的一個swiper-item。切換的tab，其實就是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

實現縱軸列表的滾動，以及當有嵌套的路由的時候，經過better-scroll來實現的禁止父路由隨着子路由的滾動的問題。

better-scroll其實也能夠去實現橫軸的滾動，可是爲何不使用better-scroll來處理呢？這是由於在better-scroll實現橫軸滾動的時候，咱們沒法在better-scorll的content的內容區域裏去下向拉動咱們的頁面。因此致使的一個Bug就是，在better-scroll橫軸滾動的區域裏，頁面動不了了。

如上圖：橫軸滾動下面還有內容，可是在圖片所示的區域裏面，沒法向下拉動。因此橫軸的滾動其實也是經過vue-awesome-swiper來實現的。

10.axios

基本功能就是經過axios來請求後臺接口的數據。而且axios能夠配合router更好的實現相似後臺的攔截器的功能，例如處理token過時這樣問題。由於當token過時的時候，僅僅經過vue-router的router.beforeEach來處理就有點無能爲力了。這時候就須要配合後臺響應返回的code來進行url的處理。

11.fastclick

 解決點透和點擊延時的問題

具體能夠看釵神的源碼分析 http://www.javashuo.com/article/p-cuoatsxb-hn.html