Vue Basic error handling

The following is likely to encounter the error, I encountered is not very full, here is just because a check too much trouble, simply summed up the slightly!

Q:Can ' t not find ' xxmodule '-some dependencies or modules cannot be found

这种情况一般报错信息可以看到是哪个包抛出的信息.一般卸载这个模块,安装重新安装下即可.

Q:data functions should return an object

这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下export default {  name: ‘page-router-view‘,      data () {      return { tabs: [ { title: ‘财务信息‘, url: ‘/userinfo‘ }, { title: ‘帐号信息‘, url: ‘/userinfo/base‘ } ] } }}为什么要 return 一个数据对象呢?官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...

Q: I added an event to the native control within the component, so I didn't take it!!!

<!--such as using a third-party framework, or some encapsulated built-in components; Then you want to bind the event--<!--//Error Example 1--><El-inputPlaceholder="Please enter a specific consumption amount" @Mouseover="Test ()" ></El-input><!--//Error Example 2--><Router-link: to="Item.menuurl" @click="Togglename=" ><I: class="[' Fzicon ', Item.menuicon]" ></I><Span>{{Item.menuname}}</Span></Router-link><!--None of the two examples above can trigger an event!!! -<!--the reason, one less modifier .native--><router-link :to=  "Item.menuurl" @click.native= " Togglename= "> <i :class= "[' Fzicon ', Item.menuicon]" ></i> Span class= "Hljs-tag" ><span>{{item.menuName} }</span></< Span class= "Hljs-name" >router-link><!--official documentation Yes, a bunch of people don't want to see it, Fuck--><!--https://cn.vuejs.org/v2/guide/components.html# binds the component to the native event-->     

Q: I used Axios, why IE Browser does not recognize (ie9+)

IE 整个家族都不支持 promise, 解决方案:npm install es6-promise// 在 main.js 引入即可// ES6的polyfillrequire("es6-promise").polyfill();

Q: I used the this.xxx= within the function, why throw cannot set property ' xxx ' of undefined;

这又是this的套路了..this是和当前运行的上下文绑定的...一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!";解决方案:暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)箭头函数: 会强行关联当前运行区域为 this 的上下文;this的知识, 读"<<你不知道的 JS 系列>>"最为合适了,里面讲的很清楚

Q: Cross-domain problem how to break! For example no ' Access-control-allow-origin ' header is present on the requested resource.

这种问题老生常谈了,我就不细说了..大体说一下;1: CORS , 前后端都要对应去配置,IE10+2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意,也可以做接口反向代理// 在 config 目录下的index.jsproxyTable: {  "/bp-api": {    target: "http://new.d.st.cn",    changeOrigin: true, // pathRewrite: { // "^/bp-api": "/" // } }}// target : 就是 api 的代理的实际路径// changeOrigin: 就是是变源,必须是...// pathRewrite : 就是路径重定向,一看就知道当然还有依旧坚挺的jsonp大法!不过局限性比较多,比较适合一些特殊的信息获取!

Q: I need to iterate over the array values updated, the values are also assigned, why the view is not updated!!!

那是因为有局限性啊,官方文档也说的很清楚,只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新);一般我们更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);传送门:数组更新检测(触发视图更新)

Q: After the routing mode changed to history, in addition to the first start home no error, refresh access routes are Error!

必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导官方文档也有,为毛总有人不喜欢去看文档,总喜欢做伸手党....FUCK传送门 : Vue-Router history Mode

Q: I want to intercept the page, or do something before the page comes in, okay?

Of course !!各种路由器的钩子!! 传送门: 导航守卫;当然,记忆滚动的位置也可以做到,详情翻翻里面的文档

Q:uncaught Referenceerror:xxx is not define

data 对应的变量没有声明你导入模块报这个错误,那绝逼是导出没写好

Q:NPM Run build cannot be accessed directly after

大佬!你最起码得在本地搭个服务器才能访问好么!!

Q:cssbackground introduction of picture packaging, Access path error

因为打包后图片是在根目录下,你用相对路径肯定报错啊....你可以魔改 webpack 的配置文件里面的static为./static...但是不建议你若是把图片什么丢到assets目录下,然后相对路径,打包后是正常的

Q:unexpected Tab Charater These

;要么遵循规则,要么改变规则;要么直接把 webpack 里面的 eslint 检测给关闭了

Axios POST request background not accepted!

Axios By default is the JSON format submission, to confirm whether the background does the corresponding support; If you can only accept the traditional form serialization, you need to write an escape method ... Of course, there is a more convenient solution, the introduction of QS (installed Axios after the default)Then turn around in the right place. A single request is OK, the Interceptor is OK ... I wrote it on the Interceptor.Post parameter serialization (add Request Interceptor) Axios.interceptors.request.Use (config + = {Do something before sending a requestif (Config.method = =  "post") {// Serialization of Config.data = Qs.stringify (Config.data); //* * * * escaped here} //if have to do authentication token, give the head with token if (Localstorage.token) {config.headers.Authorization = Localstorage. Token } return config;}, error + = {Message ({//hungry news popup component, similar to toast showclose:true, message: error, type: return promise.reject (error.data. Error.message); }); 

Q:invalid prop:type check failed for prop "xxx". Expected Boolean, got String.

props 类型已经设置了接受的范围类型,而你传递的值却又不是它需要的类型,写代码严谨些 OK?

 

Q: Why does my Vue website have a blank or flex layout?!

Come and come, the corner will walk ....UcThe Mobile WorldIeIt's not called White.flexbox layout disorder, generally you do not write the compatibility scheme. is with a variety of prefixes, composite properties split Look at me this article: Mobile crawling --- (1) layout and style of the wonderful encounter, it is best to use plug-in instead of manpower bar, introduce autoprefixer, write on the compatibility range is good.  UC Access Blank, there is a situation that will definitely cause, that is, ES6 code demotion is not thorough. other situations may be routing configuration problems (to exclude themselves) now the development is recommended on-demand, by babel-preset-env to control, in order to achieve packaging volume reduction.  But the consequences of doing so, some of the core older ... Hey.. Bye.. so it's best to ES5 the code completely !! Remember that some features can not be used indiscriminately, there is no corresponding polyfill, such as  the ES6 proxy         

Q:this. $set | this. $xxx what does this $ mean? Is it a jquery, a conflict?

且看我细细道来.Vue 的$和 jQuery 的$并没有半毛钱的关系,就跟javascript和java一样.Vue 的$是封装了一些 vue 的内建函数,然后导出以$开头...这显然并不是 jQuery的专利;jQuery 的$是选择器!!取得 DOM区域...两者的作用完全不一致!

Q: What kinds of communication are there in the component?!!!

基本最常用的是这三种;父传子: props子传父: emit兄弟通讯:event bus: 就是找一个中间组件来作为信息传递中介vuex: 信息树传送门:基本通讯Vuex

Q:vuex User Information Why save it again in the browser (sessionstorage or localstorage)

因为 vuex的 store 干不过刷新啊.保存在浏览器的缓存内,若用户刷新的话,值再取一遍呗;

Q: If the line is nginx, how to deploy? and reverse proxy these!!

传送门:一篇不大靠谱的nginx 1.11.10配置文件

 

Q:NPM Run Dev Newspapers port error! Error:listen eaddrinuse::: 8080

I use webpack scaffolding of all don't need me to say; VUE-CLI inside the Webpack configuration: config/index.jsDev: { env:require ("./dev.env"), Port: 8080, //Here, if this port has been used by other programs of the system. Change ME!!!!!! autoopenbrowser:true, assetssubdirectory: "Static", Assetspublicpath: "/", proxytable: { c12> "/bp-api": { target: "http://new.d.st.cn", changeorigin:true, //pathrewrite: { //"^/ Bp-api ":"/"/ /}}}

Q: When to use v-if, what to use v-show!

我们先来说说两者的核心差异;v-if : DOM 区域没有生成,没有插入文档..等条件成立的时候才动态插入到页面!有些需要遍历的数组对象或者值,最好用这货控制,等到拿到值才处理遍历,不然一些操作过快的情况会报错,比如数据还没请求到!v-show: DOM 区域在组件渲染的时候同时渲染了,只是单纯用 css 隐藏了对于下拉菜单,折叠菜单这些数据基本不怎么变动.用这个最合适了..而且可以改善用户体验,因为它不会导致页面的重绘,DOM 操作会!简言之: DOM结构不怎么变化的用v-show, 数据需要改动很大或者布局改动的用v-if

Q:the "Scope" attribute for scoped slots .... Replaced by "Slot-scope" since 2.5

scope 现在要用 slot-scope 来代替,但是 scope 暂时可以用,以后会移除

Q:error in Static/js/xxxxxxx.js from Uglifyjs

js,是直接引入压缩版本后的 js(xxx.min.js);然后 webpack 内又启用了 UglifyJs(压缩 JS的), 二重压缩大多都会报错!!解决方案:引入标准未压缩的 JS

Q: Inside the single component of the import xxx from ' @/components/layout/xxx ' in what the hell!

This isWebpack knowledge, see also say it ...Webpack can be configuredAlias (aka Path Alias), playedLinux orMac all know still as above, will own scaffolding of no need I said ... Lookvue-cli inside; file name: build , webpack,baseconf. js Resolve: { extensions: [". js ", ". Vue ", ". JSON "],//extension range alias that can be ignored when importing: {vue$: " Vue/dist/vue.esm.js ", " @ ": Resolve ( "src"),//Here is the alias, for example @ is directly from the/SRC to start looking up!!! "~": Resolve ("src/components")},            

Q:scss (SASS) or Less,stylus good!!

三者都是预处理器;scss 出现最久,能做的功能比较多,但是若是普通的嵌套写法,继承,mixin 啊.这三个都差不多..会其中一个其他两个的粗浅用法基本也会了.不过!!!!写法有些差异:scss: 写法上是像 css 靠齐sass : 其实也就是 scss , 只是写法不一样...靠的是缩进less : 跟 css 基本靠齐stylus : 一样,靠缩进..跟pug(Jade)一样使用环境的差异:scss 可以借助 ruby 或者 node-sass 编译less 可以用 less.js 或者对应的 loader 解析stylus 只能借助 loader 解析,它的出现就是基于 node 的也有一个后起之秀,主打解耦,插件化的!!! 那就是PostCSS,这个是后处理器!!!有兴趣的可以自行去了解,上面的写法都能借助插件实现!

Q:failed to compile with X errors:this dependency is not found!

编译错误,对应的依赖没找到!!!解决如下:知道缺少对应的模块,直接装进去若是一个你已经安装的大模块(比如 axios)里面的子模块(依赖包)出了问题,卸载重装整个大模块.因为你补全不一定有用!

Q: Can components be cached?

可以,用keep-alive;不过是有代码的..占有内存会多了...所以无脑的缓存所有组件!!!别说性能好了..切换几次,有些硬件 hold不住的,浏览器直接崩溃或者卡死..所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换..给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!

 

Q:package.json inside the dependencies and devdependencies differences!

install --save xxxx // dependenciesnpm install --save-dev xxxx // devDependencies//也能用简易的写法(i:install,-S:save,-D:save-dev)npm i -S xxxx // npm install --save xxxxnpm i -D xxxx // npm install --save-dev xxxx

Vue Basic error handling