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

時間 2020-05-23

標籤 vue 後臺管理系統遇到注意事項以及總結简体版

原文原文鏈接

地址欄加#號問題：
Vue-router 中有hash模式和history模式，vue的路由默認是hash模式，通常開發的單頁應用的URL都會帶有#號的hash模式
第一步在router/index.js下增長mode:'hidtory',而後再config/index.js下修改assetsPublicPath: './'爲assetsPublicPath: '/'；如圖：
vue循環嵌套，須要命名不一樣的變量名，來區分。
更改ElementUI 內部樣式：
經過scopd穿透的方式修改引入第三方組件庫樣式的方法；

在Vue文件中的style標籤上有一個特殊的屬性，scoped。當一個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的Vue組件，可使組件的樣式不相互污染。若是一個項目的全部style標籤都加上了scoped屬性，至關於實現了樣式的模塊化。
當打包構建的時候，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規範javascript
```
//預加載 懶執行
require.ensure(['./mod.js'], function(require){//這裏數組裏是要預加載的模塊，不寫不會先下載 
    var mod = require('./mod.js'); mod.show(); });
```
require.ensure模塊被下載來後【不當即執行】，接着執行回調函數內容。

AMD模塊被下載來【而且模塊被執行完後】,再接着執行回調函數內容。

3.webpack自帶的require.include
測試端跨域
緣由：瀏覽器的同源策略不容許跨域訪問，所謂同源策略是指協議、域名、端口相同。
解決：採用proxyTable解決。

proxyTable能夠解決咱們在vue項目中開發環境的跨域問題，可是沒法解決生產環境上的跨域問題，有的時候生產環境上也須要處理跨域問題，這個時候 proxyTable就無論用咯，咱們公司目前用的nginx代理css
async await處理異步，不須要回調
async：聲明一個異步函數；只有async函數內部的異步操做執行完，纔會執行then方法指定的回調函數

異步函數內部可使用await。

await：暫停異步的功能執行(var result = await someAsyncCall())

放置在Promise調用以前，await強制其餘代碼等待，直到Promise完成並返回結果；
當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循環中，因此不推薦一塊兒使用。能夠放在循環外，或者放在計算屬性裏面進行遍歷。
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！！！vue
```
//傳參: 
this.$router.push({ name:'xxx', params:{ id:id } }) //接收參數:
this.$route.params.id
```
另外，兩者還有點區別，直白的來講query至關於get請求，頁面跳轉的時候，能夠在地址欄看到請求參數，而params至關於post請求，參數不會再地址欄中顯示。
使用watch監聽路由（this.$route.params）變化的方法；當路由發生變化的時候執行
```
 watch: { $route: function() { var tech_type = this.$route.params.tech_type; //執行一些操做
 } },
```
當有一些數據須要隨着另一些數據變化時，建議使用computed。
當有一個通用的響應數據變化的時候，要執行一些業務邏輯或異步操做的時候建議使用watchjava
使用組件時須要常用原型綁定：@click.native=''; 這樣，咱們就把click事件直接綁定在了原型上了。
若是把全部請求放在created裏面的話,請求過多會,加載太慢會致使頁面出現短暫的白屏狀況,通常上我寫的話,接口不復雜會放created裏面,接口多複雜的話會放在mounted裏面.。
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">
    
    
    <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} } })
```
vue 阻止事件冒泡。

.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡
```
 
<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">點擊我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>
```
擴展：webpack
.prevent：取消默認事件，等同於JavaScript中的event.preventDefault()。

.capture：捕獲事件，與事件冒泡的方向相反，事件捕獲由外到內。

.self：只會觸發本身範圍內的事件，不包含子元素。

.once：只會觸發一次。