一、樣式問題
1.vue中使用less
安裝less依賴 npm install less less-loader --save-dev
在使用時 在style標簽中加入 lang="less" 也可以加上scoped代表樣式只在此作用域中有效。
2.使用element插件時修改其樣式，在vue中不起作用，這里有幾種方法可以嘗試
- 如果
style中加了scoped去掉它。 - 在要改變的樣式前加
/deep/
/deep/.el-submenu__title .el-icon-arrow-down{
margin-top:-5px;
}
<h3>二、<code>vue-router</code> 問題</h3>
<p>1.去掉vue項目路徑中的 <code>#</code></p>
<p>主要用到<code>router</code> 的 <code>history</code>模式。官網說的很詳細，以及注意點：<a href="https://router.vuejs.org/zh-cn/essentials/history-mode.html" rel="nofollow noreferrer">vue-router官網 HTML5 History模式</a></p>
<p>2.當我們通過router 中的query從一A頁面想給B頁面傳遞一個Object 對象形式的數據時，第一次B頁面可以拿到數據，但是刷新B頁面后，數據會消失。這里有一下解決方法：</p>
<ul>
<li>將A頁面的數據通過 JSON.stringify() 變成字符串，傳遞</li>
<li>將A頁面數據存儲在sessionStorage 中，B頁面同該sessionStorage 獲取</li>
<li>后台提供單獨的接口，在B頁面請求A頁面傳過來的數據</li>
</ul>
<h3>三、頁面預渲染（seo優化問題）</h3>
<p>官網也指出，如果你只是為了改善營銷頁面的SEO優化，你可能需要預渲染了。而無需使用web服務器實時動態變異html，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態 HTML 文件</p>
<p>1.預渲染</p>
<p>如果你想要預渲染需要使用 <code>prerender-spa-plugin</code> 插件來處理你的文件。這里建議你直接看官網的<code>api</code>， <code>2.x</code>版本的和<code>3.x</code>版本的<code>api</code>不同。所以建議直接看官網了解最新的<code>api</code>。 <a href="https://github.com/chrisvfritz/prerender-spa-plugin" rel="nofollow noreferrer">prerender-spa-plugin GitHub</a></p>
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' ],
})
]
}
<p>另外為頁面做Meta SEO優化 可以使用 <code>vue-meta-info</code> <a href="https://github.com/monkeyWangs/vue-meta-info" rel="nofollow noreferrer">GitHub地址</a></p>
<p><a href="https://zhuanlan.zhihu.com/p/29148760" rel="nofollow noreferrer">vue-meta-info的相關文章</a></p>
<h3>四、數據響應失效</h3>
<p>首先在<code>Vue.js</code> 中對象的響應時依賴<code>Object.defineProperty</code> 方法的，而對於數組是沒有這個方法的。</p>
<blockquote>這里需要注意，如果數組中是對象，當對象里數據變化時是可以渲染的，如果類似<code>[0,1,2,3]</code>這樣的數組，數據變化時，是不會渲染的。</blockquote>
<p>所以數組存儲的數據在更改時是沒有響應變化的。所以<code>Vue</code>提供了<code>$set()</code> 方法： <a href="https://cn.vuejs.org/v2/api/#Vue-set" rel="nofollow noreferrer">官網</a></p>
vue.array.$set(0,'change')
<h3>五、數據雙向綁定問題</h3>
<p>1.在使用vuex時，我們兩個模塊可能使用同一個數據，比如兩模塊中的表單使用的是同一個數據，當其中一個模塊中的表單填寫好時，我們進入另一個模塊表單時，也會顯示該數據，如果該數據少還可以，如果有很多字段，我們一個一個清空會和麻煩，我這里解決的辦法就是：使用<code>JSON.stringify</code> 和 <code>JSON.parse()</code></p>
let evaluateReq = { // 初始數據
type:'0',
pageSize:10,
pageNum:1,
}
const state = {
evaluateListReq:JSON.parse(JSON.stringify(evaluateReq)),
}
<p>這樣做，當我們初始化 <code>evaluateListReq</code> 數據時，可以講 <code>evaluateReq</code> 數據 通過 <code>mutations</code> 賦值給<code>evaluateListReq</code> ，如果我們這里不使用<code>JSON.stringify</code> 和 <code>JSON.parse()</code> 而直接賦值， <code>evaluateReq</code> 中的數據與 <code>evaluateListReq</code> 會被vue認為是同一個數據，都綁定上，一個值變化，都會隨着變化。</p>
<h3>六、使用Element(餓了么)插件問題</h3>
<p>1.<code><le-input></code>表單使用回車觸發事件。</p>
<el-input @keyup.enter.native="onSubmit" ></el-input>
<p>這里需要在<code>@keyup.enter</code> 后面加上<code>native</code>才會觸發回車事件。這個東西在一些實際上處理 DOM 原生事件的場合才需要添加額外的標識符。</p>
<p>2.當瀏覽器窗口變小時，<code>el-table</code>組件寬度不隨窗口響應變小。</p>
<p>這里我們需要沖突掉<code>Element</code> 中<code>el-table</code> 的 <code>max-width:100%</code> 樣式，該值不能設置成100%,可以改成99%,小於100%即可。</p>
.el-table{
max-width:99.9%
}
<h3>七、axios 交互問題</h3>
<p>1.vue中創建excel 的下載，解決excel下載亂碼問題</p>
<p>我們可以在axios的請求攔截或響應攔截中去動態創建a標簽下載excel</p>
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
}
})
<h3>八、其它注意事項</h3>
<p>1.使用v-for 時我們盡量攜帶key值，以方便vue的渲染。</p>
v-for="(item, index) in list" class="list" :key="index"
<p>2.在使用 <code>import ... from ...</code> 引入同級目錄下的組件時，盡量加上 <code>./</code> ， 不然有時會報錯</p>
import Header from './Header';
<p>3.使用<code>$emit</code> 不起作用，這里我建議你在子組件綁定父組件事件時 使用 <code>v-on</code> 全寫，盡量不使用<code>@</code> 縮寫，因為使用<code>@</code> 縮寫有時會不起作用</p>
<edit-add-ver v-on:childMethodShow="showEdit"></edit-add-ver>
<h3>九、vue-cli 目錄的分析以及我個人常用的項目構建</h3>
<p>具體目錄分析進入 <a href="https://github.com/webxiaoma/vue-demos/tree/master/vue-cli" rel="nofollow noreferrer">https://github.com/webxiaoma/vue-demos/tree/master/vue-cli</a></p>
原文地址：https://segmentfault.com/a/1190000014256745