vue后台管理系統遇到的注意事項以及總結

 

 

1. 地址欄加#號問題：
   Vue-router 中有hash模式和history模式，vue的路由默認是hash模式，一般開發的單頁應用的URL都會帶有#號的hash模式
   第一步在router/index.js下增加mode:'hidtory',然后再config/index.js下修改assetsPublicPath: './'為assetsPublicPath: '/'；如圖：
   
   
   
2. vue循環嵌套，需要命名不同的變量名，來區分。
   
   
3. 更改ElementUI 內部樣式：
   通過scopd穿透的方式修改引入第三方組件庫樣式的方法；
   
   在Vue文件中的style標簽上有一個特殊的屬性，scoped。當一個style標簽擁有scoped屬性時候，它的css樣式只能用於當前的Vue組件，可以使組件的樣式不相互污染。如果一個項目的所有style標簽都加上了scoped屬性，相當於實現了樣式的模塊化。
   
   
4. 當打包構建的時候，javascript包變得非常大，影響加載：
   解決方法即：用webpack提供的require進行代碼分割 來實現按需加載~
   我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應的組件；
   1.require AMD規范寫法
   

   const userCenter = resolve => require(['@/pages/usercenter'], resolve);
   const userInfo = resolve => require(['@/pages/usercenter/userInfo'], resolve);
   const resetPwd = resolve => require(['@/pages/usercenter/resetPwd'], resolve);

   2.require.ensure commomjs規范

   //預加載 懶執行
   require.ensure(['./mod.js'], function(require){//這里數組里是要預加載的模塊，不寫不會先下載 
       var mod = require('./mod.js');
       mod.show();
   });

   require.ensure模塊被下載來后【不立即執行】，接着執行回調函數內容。

   AMD模塊被下載來【並且模塊被執行完后】,再接着執行回調函數內容。
   3.webpack自帶的require.include
   
   
5. 測試端跨域
   原因：瀏覽器的同源策略不允許跨域訪問，所謂同源策略是指協議、域名、端口相同。
   解決：采用proxyTable解決。
   

    proxyTable可以解決我們在vue項目中開發環境的跨域問題，但是無法解決生產環境上的跨域問題，有的時候生產環境上也需要處理跨域問題，這個時候 proxyTable就不管用咯，我們公司目前用的nginx代理

6. async await處理異步，不需要回調
   async：聲明一個異步函數；只有async函數內部的異步操作執行完，才會執行then方法指定的回調函數
   
   異步函數內部可以使用await。
   await：暫停異步的功能執行(var result = await someAsyncCall())

   放置在Promise調用之前，await強制其他代碼等待，直到Promise完成並返回結果；
   
   
7. 當v-if 與 v-for 一起使用時，Eslint代碼檢查錯誤提示
   [eslint-plugin-vue]
   [vue/no-use-v-if-with-v-for]
   This 'v-if' should be moved to the wrapper element
   v-for比 vi-if的優先級高，這就意味這v-if講重復運行每個v-for循環中，所以不推薦一起使用。可以放在循環外，或者放在計算屬性里面進行遍歷。
   
   
8. vue-router query和params傳參(接收參數)，$router、$route的區別
   1.query方式的傳參和參數的接收
   注意:傳參是this.$router,接收參數是this.$route
   
   $router為VueRouter實例，想要導航到不同URL，則使用$router.push方法
   $route為當前router跳轉對象，里面可以獲取name、path、query、params等

   //傳參: 
   this.$router.push({
           path:'/xxx',
           query:{
             id:id
           }
         })
     
   //接收參數:
   this.$route.query.id

   2.params方式傳參和接收參數
   注意:params傳參，push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由，如果這里寫成了path，接收參數頁面會是undefined！！！

   //傳參: 
   this.$router.push({
           name:'xxx',
           params:{
             id:id
           }
         })
     
   //接收參數:
   this.$route.params.id

   另外，二者還有點區別，直白的來說query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而params相當於post請求，參數不會再地址欄中顯示。
   
   
9. 使用watch監聽路由（this.$route.params）變化的方法；當路由發生變化的時候執行
   

     watch: {
       $route: function() {
         var tech_type = this.$route.params.tech_type;
        //執行一些操作
       }
     },

   當有一些數據需要隨着另外一些數據變化時，建議使用computed。
   當有一個通用的響應數據變化的時候，要執行一些業務邏輯或異步操作的時候建議使用watch

10. 使用組件時需要經常使用原型綁定：@click.native=''; 這樣，我們就把click事件直接綁定在了原型上了。
    
    
11. 如果把所有請求放在created里面的話,請求過多會,加載太慢會導致頁面出現短暫的白屏情況,一般上我寫的話,接口不復雜會放created里面,接口多復雜的話會放在mounted里面.。
    
    
12. keep-alive緩存路由組件不刷新
    （keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能）
    
    當引入keep-alive 的時候，頁面第一次進入，hook的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。
    二次進來 hook 只觸發 activated，退出時觸發 deactivated
    keep-alive 之后，created 和 mounted 里面的方法不觸發，因為 keep-alive 把它們屏蔽了，也就是把數據緩存起來，所以不再請求。

    1.如果你的某些頁面一定要實時請求，可以直接在 activated 這個 hook 做 一下操作。
    2.router-view里加判斷，然后在router定義的文件里面在想要緩存的頁面多加上“meta:{keepAlive:true}”，不想要緩存就是“meta:{keepAlive:false}”或者不寫，只有為true的時候是會被keep-alive識別然后緩存的。
    

    <template>
      <div id="app">
        <!--緩存想要緩存的頁面，實現后退不刷新-->
        <!--加上v-if的判斷，可以自定義想要緩存的組件，自定義在router里面-->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        
        <!--這里是其他的代碼-->
      </div>
    </template>

    
    

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    export default new Router({
        {//home會被緩存
            path:"/home",
            component:home,
            meta:{keepAlive: true}
        }
        {//hello不會被緩存
            path:"/hello",
            component:hello,
            meta:{keepAlive: false}
        }
    })

13. vue 阻止事件冒泡。
    
    .stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡

    <!-- HTML --> 
    <div id="app"> 
    　　<div class="outeer" @click.stop="outer"> 
    　　　　<div class="middle" @click.stop="middle"> 
    　　　　　　<button @click.stop="inner">點擊我(^_^)</button>
     　　　　</div>
     　　</div> 
    </div>

    擴展：

    .prevent：取消默認事件，等同於JavaScript中的event.preventDefault()。
    
    .capture：捕獲事件，與事件冒泡的方向相反，事件捕獲由外到內。
    .self：只會觸發自己范圍內的事件，不包含子元素。
    .once：只會觸發一次。