Vue常见问题汇总
Q：我给组件内的原⽣控件添加事件，怎么不⽣效了
<!--⽐如⽤了第三⽅框架，或者⼀些封装的内置组件; 然后想绑定事件-->
<!--// 错误例⼦1-->
<el-input placeholder="请输⼊特定消费⾦额 " @mouseover="test()"></el-input>
<!--// 错误例⼦2-->
<router-link :to="uUrl" @click="toggleName=''">
<i :class="['fzicon',uIcon]"></i>
<span>{{uName}}</span>
</router-link>
electron vue教程<!--上⾯的两个例⼦都没法触发事件-->
<!--究其原因，少了⼀个修饰符 .native-->
<router-link :to="uUrl" @click.native="toggleName=''">
<i :class="['fzicon',uIcon]"></i>
<span>{{uName}}</span>
</router-link>
<!--明明官⽅⽂档有的,⼀堆⼈不愿意去看,,Fuck-->
<!--/v2/guide/components.html#给组件绑定原⽣事件-->
Q：我⽤了 axios , 为什么 IE 浏览器不识别(IE9+)
那是因为 IE 整个家族都不⽀持 promise, 解决⽅案:
npm install es6-promise
// 在 main.js 引⼊即可
/
/ ES6的polyfill
require("es6-promise").polyfill();
Q:Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx ⼤体就是说，单组件渲染 DOM 区域必须要有⼀个根元素，不能出现同级元素.
可以⽤v-if和v-else-if指令来控制其他元素达到并存的状态
换个直⽩的解释，就是有⼀个唯⼀的⽗类，包裹者;
⽐如⼀个 div(⽗包含块) 内部多少个同级或者嵌套都⾏，但是最外层元素不能出现同级元素
Q：跨域问题怎么破!
这种问题⽼⽣常谈了，我就不细说了..⼤体说⼀下;
1: CORS , 前后端都要对应去配置,IE10+
2: nginx 反向代理,⼀劳永逸 <-- 线上环境可以⽤这个
线下开发模式,⽐如你⽤了vue-cli, ⾥⾯的 webpack 有引⼊了proxyTable这么个玩意,
也可以做接⼝反向代理
// 在 config ⽬录下的index.js
proxyTable: {
"/bp-api": {
target: "new.d.st",
changeOrigin: true,
// pathRewrite: {
//  "^/bp-api": "/"
// }
}
}
/
/ target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源，必须是...
// pathRewrite : 就是路径重定向,⼀看就知道
Q：路由模式改为history后，除了⾸次启动⾸页没报错，刷新访问路由都报错!
必须给对应的服务端配置查询的主页⾯..也可以认为是主路由⼊⼝的引导
官⽅⽂档也有，为⽑总有⼈不喜欢去看⽂档，总喜欢做伸⼿党....FUCK
传送门 :
Q：我想拦截页⾯，或者在页⾯进来之前做⼀些事情，可以么?
Of course !!
各种路由器的钩⼦!! 传送门: ;
当然，记忆滚动的位置也可以做到，详情翻翻⾥⾯的⽂档
Q:TypeError: xxx is not a function
这种问题明显就是写法有问题...能不能动点脑⼦!!
Q:Uncaught ReferenceError: xxx is not define
实例内的 data 对应的变量没有声明
你导⼊模块报这个错误，那绝逼是导出没写好
Q:Error in render function:"Type Error: Cannot read property 'xxx' of undefined"
这种问题⼤多都是初始化的姿势不对;
⽐如引⼊echart这些...仔细去了解下⽣命周期，再来具体初始化;
vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题
Q:Unexpected token: operator xxxxx
⼤佬，这个⼀看就是语法错误啊.
基本都是符号问题.
⼀般报错会给出哪⼀⾏或者哪个组件
之后不能直接访问
⼤佬!你最起码得在本地搭个服务器才能访问好么!!
Q:CSSbackground引⼊图⽚打包后，访问路径错误
因为打包后图⽚是在根⽬录下，你⽤相对路径肯定报错啊....
你可以魔改 webpack 的配置⽂件⾥⾯的static为./但是不建议
你若是把图⽚什么丢到assets⽬录下，然后相对路径，打包后是正常的
安装模块时命令窗⼝输出unsupported platform xxx
⼀般两种情况,node版本不兼容，系统不兼容;
解决⽅案: 要么不装，要么满⾜安装要求;
Q:Unexpected tab charater这些
⼀般是你⽤脚⼿架初始化的时候开了 eslint ;
要么遵循规则，要么改变规则;
要么直接把 webpack ⾥⾯的 eslint 检测给关闭了
组件挂载失败，问题只有这么⼏个
组件没有正确引⼊; 挂载点顺序错了了;
⾃⾏动⼿排查
组件没有正确引⼊或者正确使⽤，依次确认
导⼊对应的组件
在 components 内声明
在 dom 区域声明标签
Q: axios的 post 请求后台接受不到!
axios默认是 json 格式提交，确认后台是否做了对应的⽀持;
若是只能接受传统的表单序列化，就需要⾃⼰写⼀个转义的⽅法...
当然还有⼀个更加省事的⽅案，装⼀个⼩模块qs
npm install qs -S
// 然后在对应的地⽅转就⾏了..单⼀请求也⾏，也⾏...我是写在的.
// 具体可以看看我 axios 封装那篇⽂章
//POST传参序列化(添加请求)
quest.use(
config => {
// 在发送请求之前做某件事
if (
) {
// 序列化
config.data = qs.stringify(config.data); // ***** 这⾥转义
}
// 若是有做鉴权token , 就给头部带上token
if (ken) {
config.headers.Authorization = ken;
}
return config;
},
error => {
Message({
//  饿了么的消息弹窗组件，类似toast
showClose: true,
message: error,
type: "message"
});
ject(message);
}
);
Q:Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.
这种问题⼀般就是组件内的 props 类型已经设置了接受的范围类型,
⽽你传递的值却⼜不是它需要的类型，写代码严谨些 OK?
Q: 过滤器可以⽤于DOM区域结合指令么?
// 不⾏，看下⾯的错误例⼦
<li v-for="(item,index) in range | sortByDesc | spliceText">{{item}}</li>
// `vue2+`的指令只能⽤语 mustache`{{}}` , 正确姿势如下:
<span>{{ message | capitalize }}</span>
Q: [...Array],...mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {}这种写法是什么⿁!出门左拐,ES6+(ES2015)的基础去过⼀遍..
上⾯依次：数组解耦，对象解耦，对象风格函数，对象解耦赋值传递
这个问题⼤多都是你写的代码有问题.你的事件触发了.
但是组件内部缺少对应的实现或者变量，所以抛出事件错误.
解决⽅案：看着报错慢慢排查
组件的通讯有哪⼏种啊
基本最常⽤的是这三种;
⽗传⼦: props
⼦传⽗: emit
兄弟通讯:
event bus: 就是⼀个中间组件来作为信息传递中介
vuex: 信息树
传送门:
Q:vuex的⽤户信息为什么还要存⼀遍在浏览器⾥(sessionStorage or localStorage)
因为 vuex的 store ⼲不过刷新啊.
保存在浏览器的缓存内，若⽤户刷新的话，值再取⼀遍呗;
Q:"有 Vue + Vue Router + Vuex"或什么"express + vue + mongodb"的项⽬学习么
Github ⼀搜⼀⼤堆，提这些问题的⼈，不是培训机构的就是瞎进这⾏的⼈或者学⽣党;
Q：线上若是 nginx，如何部署?以及反向代理这些!!
传送门:
我会 Vue 我还需要学习 jQuery 或者原⽣ JS 么"
jQuery还有很多公司在⽤，源码可以学习的地⽅很多;
原⽣ js 是根本，不管是哪个前端框架，最终都是 js 实现的;
只有基础扎实，才能学的⽐较深...
框架只是加快开发，提交效率，但不是你在这⼀⾏长期⽴⾜的根本;
前端的⼈不仅需要宽度，也要深度...这样才能⾛的更远....
Q:Vue ,React, Angular学习哪个好?哪个⼯作⽐较好!
基础薄弱的,Vue ⽐较好上⼿
基础较好的，可以选择NG5或者React 16;
NG5需要学习typescript和rxjs，还⽤到⽐较多的新东西,⽐如装饰器，后端的注⼊概念.ng有⾃⼰的⼀整套 MVVM 流程;
⽽Vue和React核⼼只是view，可以搭配⾃⼰喜欢的
React的写法偏向函数式写法，还有 jsx，官⽅⾃⼰有 flow，当然也能搭配ts，我也没怎么接触..所以也有⼀定的学习成本;
⾄于哪个⽐较好⼯作告诉你..若是只会⼀个框架，那不是⼀个合格的前端;
⼈家要的是动⼿能⼒，解决能⼒技术和待遇是成正⽐的!!
颜值和背景，学历,⼝才可以加分..但是这些条件你必须要有的基础下才能考虑这些，不然就慢慢学;
Q:"⾸屏加载⽐较慢!!怎么破!打包⽂件⽂件⽐较⼤"
依次排除和确认:
减少第三⽅库的使⽤,⽐如jquey这些都可以不要了，很少操作 dom,⽽且原⽣基本满⾜开发
若是引⼊moment这些,webpack 排除国际化语⾔包
webpack 常规压缩js,css, 愿意折腾的还可以引⼊ dll 这些
路由组件采⽤懒加载
加⼊路由过渡和加载等待效果，虽然不能解决根本，但起码让⼈等的舒⼼⼀点不是么
整体下来，打包之后⼀般不会太⼤;
但是倘若想要更快?那就只能采⽤服务端渲染(SSR)了，可以避免浏览器去解析模板和指令这些;
直接返回⼀个 html ....还能
Q: Vue SPA 没法做优化(SEO)!有解决⽅案么
可以的,SSR(服务端渲染就能满⾜你的需求)，因为请求回来就是⼀个处理完毕的 html
现在 vue 的服务端开发框架有这么个⽐较流⾏，如下
传送门:
Q: Vue可以写 hybird App 么!
当然可以，两个⽅向.
+
可以写桌⾯端么?
当然可以，有electron和node-webkit(nw);
我只了解过electron;
: Vue-cli 针对 electron 的脚⼿架模板
Q: Vue开发，项⽬中还需要 jQuery么
分情况探讨:
若是⽼项⽬，只是单纯引⼊ Vue 简化开发的，依旧⽤吧...
重构项⽬?或者发起新项⽬的，真⼼没必要了.开发思路不⼀样，很多以前⽤ DOM 操作的现在基本数据驱动下，少量的 DOM 操作原⽣就能搞定...⽽且能减⼩打包体积，速度⼜快，何乐⽽不为
Q:Vue PC(桌⾯)端,M(mobile：移动)端,⽤什么 UI 框架好啊
PC
我推荐的只有两个 element UI和iview
Mobile
Vux
当然还有很多，但是基本⽤户的认知度都不⾼，这三个⽐较流⾏
可以写⼩程序么，怎么搞起
可以的，社区也有⼈出了对应的解决⽅案,⽐如⽐较流⾏的⽅案wepy;
wepy你也可以理解为⼀个脚⼿架，让你的写⼩程序的⽅式更贴近你⽤vue-cli写 vue 的感觉...
传送门:
想要 mock 数据，直接请求 json⽂件为什么不⾏!
当然不⾏，浏览器安全机制不允许,JS天⽣不能越权(NodeJS不能单纯说是JS)
你要 mock 数据,⼀般都有⽐较成熟的⽅案...传送门:
据说 Vue 3 打算⽤Proxy来做数据拦截及响应..这样可以检测到更多数据类型的响应；不过 IE系列全军覆没,polyfill 都不⾏
Vue ⽬前最新 2.5.3 核⼼库已适配 typescript 2.6; 但是周边库没跟上..你想要⽤ ts+vue开发已经没什么特别的坑了...但是组件基本都是要⾃⼰去写..第三⽅没有加上对应的声明⼀堆问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。