vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题，希望大家注意。
注:文末有福利！
一、样式问题
1.vue中使用less
安装less依赖 npm install less less-loader --save-dev
修改 webpack.base.config.js 配置文件
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
}
在使用时 在style标签中加入 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模式。官网说的很详细，以及注意点：vue-router官网 HTML5 History模式
三、页面预渲染（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' ],
})
]
}
四、数据响应失效
首先在Vue.js 中对象的响应时依赖Object.defineProperty 方法的，而对于数组是没有这个方法的。所以数组存储的数据在更改时是没有响应变化的。所以Vue提供了$set() 方法： 官网
vue.array.$set(0,'change')
五、数据双向绑定问题
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认为是同一个数据，都绑定上，一个值变化，都会随着变化。
六、使用Element(饿了么)插件问题
1.<le-input>表单使用回车触发事件。
<el-input @keyup.enter.native="onSubmit" ></el-input>
这里需要在@keyup.enter 后面加上native才会触发回车事件。这个东西在一些实际上处理 DOM 原生事件的场合才需要添加额外的标识符。
推荐一个良心公众号【IT资源社】：
本公众号致力于免费分享全网最优秀的视频资源，学习资料，面试经验等，前端，PHP，JAVA，算法，Python，大数据等等，你想要的这都有
IT资源社－QQ交流群：625494093
也可添加微信拉你进微信群交流: super1319164238
微信搜索公众号：ITziyuanshe 或者扫描下方二维码直接关注，
