1. 移動端開發中的1px邊框問題，由於在不同螢幕上，可能會使得1px實際在移動端顯示不是1px,怎麼解決?
2. 移動端click點選事件，會延遲300ms,怎麼解決？
解決：引入第三方包,解決移動端click事件延遲300ms；
    npm install fastclick --save;
    在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目錄時，需要寫成

[email protected]/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 [email protected]
            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. Bscroll使用方法：
        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根目錄資料夾下