移動端vue2.5去哪兒項目-常見問題整理

1、項目中遇到的問題、難點及解決方式

1. 移動端開發中的1px邊框問題，因爲在不一樣設備屏幕上，可能會使得1px實際在移動端顯示不是1px,怎麼解決?  

2. 移動端click點擊事件，會延遲300ms,怎麼解決？
解決：引入fastclick插件,解決移動端300ms延遲問題；
    npm install fastclick --save;
    在router 文件夾下main.js文件中寫以下代碼
     import fastClick from 'fastclick'
    fastClick.attach(document.body)

3. scoped限制vue文件下的css僅在該.vue文件下使用；

4. iconfont字體圖標的應用：
    步驟： 4.1 在iconfont註冊帳號，創建一個項目，而後將須要的圖標加入到該項目下，下載到本地電腦該項目文件夾下src->assets->iconfont中。
          4.2 在iconfont.css的url中修改字體在本地的路徑，在main.js中直接引入該文件import "./assets/iconfont.css"。
          4.3 <span class="iconfont">&#xe624;</span>便可顯示該圖標字體。

5. stylus樣式的應用：
    步驟：5.1安裝： npm install --save  stylus;有時下載須要npm install --save  stylus-loader;
             5.2 使用：<style lang="stylus" scoped/> 。
             5.3 varibles.stylus該文件夾存放stylus的變量，

                 在<style lang="stylus" scoped/>標籤內引入@import "../../assets/varibles.stylus"，而後

                  background:@bgColor便可使用該變量。 
6. @在路徑中指的是src目錄，即@/assets/css/reset.css,注意，在css樣式中引入其餘css目錄時，須要寫成~@/assets/css/reset.css。

7. 簡化路徑，爲經常使用路徑簡化別名，如@/assets/css/可簡化爲csss/：
    步驟：7.1 在build下webpack.base.conf.js文件下
            resolve: {
                extensions: ['.js', '.vue', '.json'],
                alias: {
                  'vue$': 'vue/dist/vue.esm.js',
                  '@': resolve('src'),    //@這是src目錄的別名
                  'csss':resolve('src/css')   //這是src/css的別名，從而用csss替代src/css路徑達到簡化效果
                }
            }
         7.2 重啓vue項目，vue run dev;
         
8. vue-awesome-swiper輪播插件的應用：
    步驟：1在main.js中引入全局插件：
            npm install --save vue-awesome-swiper@2.6.7
            import VueAwesomeSwiper from 'vue-awesome-swiper'
            import "swiper/dist/css/swiper.css"
            Vue.use(VueAwesomeSwiper)
         2.
        <swiper :options="swiperOption" >
            <!-- slides -->
            <swiper-slide>
                <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg" alt="去哪網"/>
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg" alt="去哪網" />
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>

9. 輪播中出現的抖動現象

   解決方式：設置元素的寬高比值固定：
    .wrapper
        overflow:hidden
        width:100%
        height:0
        padding-bottom:31.25%   //即高始終爲寬的31.25%
    擴展：父元素display:flex佈局，子元素flex:1;min-width:0，表示自適應父元素剩餘的寬度，且不會超出父元素的寬度。
    
10. axios：實現跨平臺的請求
    步驟：10.1  npm install axios --save  //或者<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          10.2  import axios from "axios"
          10.3  methods:{            //經過.json文件模擬後端接受的數據，將index.json文件放在static裏面
                      getHomeInfo(){
                          axios.get("./static/mock/index.json").then(this.getHomeInfoSucc)
                      },
                      getHomeInfoSucc(res){
                          console.log(res)
                      }
                  }
         10.4 在config>index.js裏面 作以下設置，則能夠實現經過調用api/index.json接口時，自動轉到本地static/mock/index.json文件   
                 proxyTable: {
                    "/api":{
                        target:"http://location:8098",
                        pathRewrite:{
                            "^/api":"/static/mock"
                        }
                    }
                }
11. better-scroll使用方法：
        1. npm下載better-scroll：npm install better-scroll --save;
        2. 引入better-scroll：import Bscroll from "better-scroll";
        3. 定義標籤dom:  < div ref="div"></div>
        4. 實例化bscroll: this.scroll=new Bscroll(this.$refs.div)便可;
注意：Bscroll提供滾動到指定DOM位置的API，this.scroll.scrollToElement(dom);    

12.由循環生成的this.$refs是一個數組

13.定義一個量change，經過this.$emit向父組件city.vue傳值e.target.innerText，
    父組件經過<v-alpha :letters="letterCities" @change="letterChange"></v-alpha>接受子組件的傳值，
    父組件在把值經過屬性傳值的方法傳遞給子組件lists.vue
    即間接實現兄弟組件的傳遞        

14. 經過一次性定時器實現函數節流，即滑動時沒16ms執行一次，讓執行的頻率不那麼快,從而實現代碼優化

15. vuex的使用：若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，
    您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。可是，若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，
    Vuex 將會成爲天然而然的選擇；
    
步驟：15.1  安裝vuex:npm install vuex --save ；
      15.2  src文件夾下建立一個store文件夾用於處理vuex；
      15.3  在store文件夾下建立index.js；
      15.4 在index.js裏寫：
              import Vue from "vue"
              import Vuex from "vuex"
            
            Vue.use(Vuex);   //vue裏面使用插件（如vuex）都是經過Vue.use(插件名)
            
            export default new Vuex.Store({  //建立new Vuex.Store倉庫，並導出export
                state:{   //存放全局公用的數據
                    city:"重慶",     //首頁頭部顯示的城市，默認爲重慶
                },
                actions:{   //接受模塊經過this.$store.dispatch傳遞過來的changeCity=item的數據，ctx.commit表示把該數據名和值傳遞給mutations
                    changeCity(ctx,item){
                        ctx.commit("changeCity",item)
                    }
                },
                //註釋：若是是this.$store.commit傳遞過的數據，能夠直接不須要actions，從而直接經過mutations處理修改state的值
                mutations:{   //接受actions經過ctx.commit傳遞的數據並處理，即修改state裏面的city讓其等於item
                    changeCity(state,item){
                        state.city=item;
                    }
                }
            })
      15.5 在main.js中：
              import store from "./store"
              new Vue({
              el: '#app',
              router,
              store,
              components: { App },
              template: '<App/>'
            })
      15.6  在模塊中{{this.$store.state.city}}便可使用；
      15.7  修改store中的數據：this.$store.dispatch("changeCity",item);給vuex的store倉庫的actions派發一個名字爲changeCity，值爲item的數據傳遞給store
            若是是this.$store.commit("changeCity",item)能夠直接給vuex的store倉庫不須要actions，從而直接經過mutations處理修改state的值

16.localStorage本地存儲:
        let defaultCity='重慶';  
        try{    //避免用戶禁止了localStorage，會報錯
            if(localStorage.city){
                defaultCity=localStorage.city
            }
        }catch(e){}
        
        export default  new Vuex.Store({
            state:defaultCity,     //首頁頭部顯示的城市，默認爲localStorage.city或者重慶
        })

17. keep-alive優化代碼，避免重複發送ajax獲取重複數據，keep-alive緩存重複的數據：
    <keep-alive exclude="組件name名">            //exclude="組件name名"表示該組件不須要緩存，即每次跳轉到頁面都從新加載mounted生命週期
          <router-view/>
      </keep-alive>
      在<router-view/>標籤外部包裹一層keep-alive標籤，便可緩存，即在vue中增長了activated生命週期(在頁面初始化mounted掛載完成，或者跳轉回當前頁面時，執行該生命週期函數)，
       activated(){ //由於keep-alive而多出來的生命週期，即頁面初始加載時和mounted同樣執行，且在每次頁面跳轉返回當前頁面時，仍然會執行，可是mounted由於在keep-alive下不會執行了
          if(this.lastCity !== this.city){   //即跳轉回當前頁面時，若是選擇的城市發生改變，則再次發生ajax，不然就不發生ajax
              this.lastCity=this.city;   
              this.getHomeInfo();   
          }
      }

18. <router-link tag="li" :to="'/default/'+list.id"></router-link>這種寫法，避免了a標籤改變了li表示內裏的文字顏色，至關於<li></li>且自帶跳轉頁面的功能。 
<router-link tag="div" :to="."></router-link>   其中to="."表示返回上一頁
 
19. 路由帶參數傳值：
    {
      path: '/detail/:id',
      component: Detail
    }
20. vue頁面的滾動事件：window.addEventListener("scroll",this.headerScroll,true)添加true有時候才能觸發滾動事件，頁面滾動距離始終爲0，
    可能緣由是body,html有overflow:hidden屬性    ，刪除便可。
    activated(){   //當前組件頁面顯示的時候觸發該生命週期，由於window是全局的，在其餘頁面滾動時也會觸發，因此須要在當前頁面隱藏或者被其餘頁面替換時，移除滾動事件
        window.addEventListener("scroll",this.headerScroll,true)
    },
    deactivated(){//當前組件頁面隱藏/或被其餘頁面替換的時候觸發該生命週期
        window.removeEventListener("scroll",this.headerScroll,true)
    }
    
21. vue中的遞歸組件：即組件裏面調用組件本身自己；
    經過name：" detailComponent"名，去調用<detail-component :list="參數"></detail-component>
    
22. vue組件的name名稱的做用：
        （1）遞歸組件時，做爲標籤名 < name-compontent></name-compontent>
        （2）該組件不須要緩存時也須要用到    <keep-alive exclude="組件name名"> <router-view/></keep-alive>
        
        
23.  避免當前頁面滾動到底部，跳轉到其餘頁面時也在底部：
     在vue項目的router->index.js中：
    export default new Router({
      routes: [
        {
          path: '/',
          component: Home
        },{
          path: '/city',
          component: City
        },{
          path: '/detail/:id',
          component: Detail,
        },
        {
          path: '/pics',
          component: Pics
        }],
       scrollBehavior (to, from, savedPosition) {   //vue-router的滾動行爲，避免當前頁面滾動到底部，跳轉其餘頁面時也在底部
          return { x: 0, y: 0 }
        }
    })

24. vue項目的動畫組件：
    （1.）新建一個動畫組件anim.vue:  <transition><slot></slot></transition>
    （2.）而後在style裏面定義.v-enter,.v-leave-to,.v-enter-active,.v-leave-active動畫個個時刻的樣式。
    （3.）在其餘組件用引入該動畫組件，而後將須要執行動畫效果的標籤包裹在該動畫組件標籤中便可。
        

25. vue項目的接口聯調:即將模擬的json數據改爲從服務器獲取數據：
    步驟：在config->index.js下：
            dev: {
                assetsSubDirectory: 'static',
                assetsPublicPath: '/',
                proxyTable: {
                    "/api":{
                        target:"http://localhost:80", // 將此改成服務地址，即發送/api的ajax會從該地址獲取數據
                    }
                },
                

26. vue項目打包上線：進入該項目的命令行，輸入npm run build，會生成dist文件，而後將該文件裏內容放在服務上，如放在xampp->htdocs根目錄文件夾下原文連接：https://blog.csdn.net/qq_42231156/article/details/82949939