一、樣式問題

1.vue中使用less

安裝less依賴?npm install less less-loader --save-dev

在使用時 在style標(biāo)簽中加入?lang="less"?也可以加上scoped代表樣式只在此作用域中有效。

2.使用element插件時修改其樣式，在vue中不起作用，這里有幾種方法可以嘗試

• 如果?style?中加了?scoped?去掉它。
• 在要改變的樣式前加?/deep/

 /deep/.el-submenu__title .el-icon-arrow-down{
    margin-top:-5px;
}

二、vue-router?問題

1.去掉vue項目路徑中的?#

主要用到router?的?history模式。官網(wǎng)說的很詳細(xì)，以及注意點：vue-router官網(wǎng) HTML5 History模式

2.當(dāng)我們通過router 中的query從一A頁面想給B頁面?zhèn)鬟f一個Object 對象形式的數(shù)據(jù)時，第一次B頁面可以拿到數(shù)據(jù)，但是刷新B頁面后，數(shù)據(jù)會消失。這里有一下解決方法：

• 將A頁面的數(shù)據(jù)通過 JSON.stringify() 變成字符串，傳遞
• 將A頁面數(shù)據(jù)存儲在sessionStorage 中，B頁面同該sessionStorage 獲取
• 后臺提供單獨的接口，在B頁面請求A頁面?zhèn)鬟^來的數(shù)據(jù)

三、頁面預(yù)渲染（seo優(yōu)化問題）

官網(wǎng)也指出，如果你只是為了改善營銷頁面的SEO優(yōu)化，你可能需要預(yù)渲染了。而無需使用web服務(wù)器實時動態(tài)變異html，而是使用預(yù)渲染方式，在構(gòu)建時簡單地生成針對特定路由的靜態(tài) HTML 文件

1.預(yù)渲染

如果你想要預(yù)渲染需要使用?prerender-spa-plugin?插件來處理你的文件。這里建議你直接看官網(wǎng)的api，?2.x版本的和3.x版本的api不同。所以建議直接看官網(wǎng)了解最新的api。?prerender-spa-plugin GitHub

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // 生成文件的路徑
      staticDir: path.join(__dirname, 'dist'),
      // 對應(yīng)路由生成的目錄
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

另外為頁面做Meta SEO優(yōu)化 可以使用?vue-meta-info?GitHub地址

vue-meta-info的相關(guān)文章

四、數(shù)據(jù)響應(yīng)失效

首先在Vue.js?中對象的響應(yīng)時依賴Object.defineProperty?方法的，而對于數(shù)組是沒有這個方法的。

這里需要注意，如果數(shù)組中是對象，當(dāng)對象里數(shù)據(jù)變化時是可以渲染的，如果類似[0,1,2,3]這樣的數(shù)組，數(shù)據(jù)變化時，是不會渲染的。

所以數(shù)組存儲的數(shù)據(jù)在更改時是沒有響應(yīng)變化的。所以Vue提供了$set()?方法：?官網(wǎng)

vue.array.$set(0,'change')

五、數(shù)據(jù)雙向綁定問題

1.在使用vuex時，我們兩個模塊可能使用同一個數(shù)據(jù)，比如兩模塊中的表單使用的是同一個數(shù)據(jù)，當(dāng)其中一個模塊中的表單填寫好時，我們進(jìn)入另一個模塊表單時，也會顯示該數(shù)據(jù)，如果該數(shù)據(jù)少還可以，如果有很多字段，我們一個一個清空會和麻煩，我這里解決的辦法就是：使用JSON.stringify?和?JSON.parse()

let evaluateReq = { // 初始數(shù)據(jù)
    type:'0',
    pageSize:10,
    pageNum:1,
}

const state = {
    evaluateListReq:JSON.parse(JSON.stringify(evaluateReq)), 
}

這樣做，當(dāng)我們初始化?evaluateListReq?數(shù)據(jù)時，可以講?evaluateReq?數(shù)據(jù) 通過?mutations?賦值給evaluateListReq，如果我們這里不使用JSON.stringify?和?JSON.parse()?而直接賦值，?evaluateReq?中的數(shù)據(jù)與?evaluateListReq?會被vue認(rèn)為是同一個數(shù)據(jù)，都綁定上，一個值變化，都會隨著變化。

六、使用Element(餓了么)插件問題

1.<le-input>表單使用回車觸發(fā)事件。

<el-input?@keyup.enter.native="onSubmit" ></el-input>

這里需要在@keyup.enter?后面加上native才會觸發(fā)回車事件。這個東西在一些實際上處理 DOM 原生事件的場合才需要添加額外的標(biāo)識符。

2.當(dāng)瀏覽器窗口變小時，el-table組件寬度不隨窗口響應(yīng)變小。

這里我們需要沖突掉Element?中el-table?的?max-width:100%?樣式，該值不能設(shè)置成100%,可以改成99%,小于100%即可。

.el-table{
   max-width:99.9%
}

七、axios 交互問題

1.vue中創(chuàng)建excel 的下載，解決excel下載亂碼問題

我們可以在axios的請求攔截或響應(yīng)攔截中去動態(tài)創(chuàng)建a標(biāo)簽下載excel

function excelDown(res){  // excel 下載請求
  //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這里表示xlsx類型
  var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
　　var downloadElement = document.createElement('a');
　　var href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接
　　downloadElement.href = res.request.responseURL  `&token=${sessionStorage.JRYC_TOKEN}`;
　　downloadElement.download = '列表.xls'; //下載后文件名
　　document.body.appendChild(downloadElement);
　　downloadElement.click(); //點擊下載
　　document.body.removeChild(downloadElement); //下載完成移除元素
　　window.URL.revokeObjectURL(href); //釋放掉blob對象
}


axios.interceptors.response.use(res => {

   if (res.headers['content-type'] == 'application/vnd.ms-excel' || res.headers['content-type'] == 'application/vnd.ms-excel;charset=UTF-8') {
        excelDown(res)
        return {code:0,state:'success'}
    }else{
      return res
    }
})

八、其它注意事項

1.使用v-for 時我們盡量攜帶key值，以方便vue的渲染。

v-for="(item, index) in list"?class="list"?:key="index"

2.在使用?import ... from ...?引入同級目錄下的組件時，盡量加上?./?， 不然有時會報錯

import?Header?from?'./Header';

3.使用$emit?不起作用，這里我建議你在子組件綁定父組件事件時 使用?v-on?全寫，盡量不使用@?縮寫，因為使用@?縮寫有時會不起作用

<edit-add-ver v-on:childMethodShow="showEdit"></edit-add-ver>