vue項目中的常見問題（vue-cli版本3.0.0）

1、樣式問題

1.vue中使用less

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

在使用時 在style標籤中加入 lang="less" 也能夠加上scoped表明樣式只在此做用域中有效。

2.使用element插件時修改其樣式，在vue中不起做用，這裏有幾種方法能夠嘗試

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

vue-cli3.x 新特性及踩坑記

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

2、vue-router 問題

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

主要用到router 的 history模式。官網說的很詳細，以及注意點：vue-router官網 HTML5 History模式

2.當咱們經過router 中的query從一A頁面想給B頁面傳遞一個Object 對象形式的數據時，第一次B頁面能夠拿到數據，可是刷新B頁面後，數據會消失。這裏有一下解決方法：

• 將A頁面的數據經過 JSON.stringify() 變成字符串，傳遞
• 將A頁面數據存儲在sessionStorage 中，B頁面同該sessionStorage 獲取
• 後臺提供單獨的接口，在B頁面請求A頁面傳過來的數據

3、頁面預渲染（seo優化問題）

官網也指出，若是你只是爲了改善營銷頁面的SEO優化，你可能須要預渲染了。而無需使用web服務器實時動態變異html，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態 HTML 文件

1.預渲染

若是你想要預渲染須要使用 prerender-spa-plugin 插件來處理你的文件。這裏建議你直接看官網的api， 2.x版本的和3.x版本的api不一樣。因此建議直接看官網瞭解最新的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'),
      // 對應路由生成的目錄
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

另外爲頁面作Meta SEO優化 可使用 vue-meta-info GitHub地址

vue-meta-info的相關文章

4、數據響應失效

首先在Vue.js 中對象的響應時依賴Object.defineProperty 方法的，而對於數組是沒有這個方法的。

這裏須要注意，若是數組中是對象，當對象裏數據變化時是能夠渲染的，若是相似 [0,1,2,3]這樣的數組，數據變化時，是不會渲染的。

因此數組存儲的數據在更改時是沒有響應變化的。因此Vue提供了$set() 方法： 官網

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

5、數據雙向綁定問題

1.在使用vuex時，咱們兩個模塊可能使用同一個數據，好比兩模塊中的表單使用的是同一個數據，當其中一個模塊中的表單填寫好時，咱們進入另外一個模塊表單時，也會顯示該數據，若是該數據少還能夠，若是有不少字段，咱們一個一個清空會和麻煩，我這裏解決的辦法就是：使用JSON.stringify 和 JSON.parse()

let evaluateReq = { // 初始數據
    type:'0',
    pageSize:10,
    pageNum:1,
}

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

這樣作，當咱們初始化 evaluateListReq 數據時，能夠講 evaluateReq 數據 經過 mutations 賦值給evaluateListReq ，若是咱們這裏不使用JSON.stringify 和 JSON.parse() 而直接賦值， evaluateReq 中的數據與 evaluateListReq 會被vue認爲是同一個數據，都綁定上，一個值變化，都會隨着變化。

6、使用Element(餓了麼)插件問題

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

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

這裏須要在@keyup.enter 後面加上native纔會觸發回車事件。這個東西在一些實際上處理 DOM 原生事件的場合才須要添加額外的標識符。

2.當瀏覽器窗口變小時，el-table組件寬度不隨窗口響應變小。

這裏咱們須要衝突掉Element 中el-table 的 max-width:100% 樣式，該值不能設置成100%,能夠改爲99%,小於100%便可。

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

7、axios 交互問題

1.vue中建立excel 的下載，解決excel下載亂碼問題

咱們能夠在axios的請求攔截或響應攔截中去動態建立a標籤下載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); //建立下載的連接
　　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
    }
})

8、其它注意事項

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>

9、vue-cli 目錄的分析以及我我的經常使用的項目構建

具體目錄分析進入 https://github.com/webxiaoma/vue-demos/tree/master/vue-cli

原文地址：https://segmentfault.com/a/1190000014256745