vue项目中的常见问题（vue-cli版本3.0.0）

一、样式问题

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;

}

<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>&lt;le-input&gt;</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