Pages: 7/292 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Jun 1
1、vue proxyTable接口跨域请求调试
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:

服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com

在config中新建一个文件命名为proxyConfig.js :

config文件夹下的index.js引入proxyConfig.js:

重启项目npm run dev:

你会发现出现了这个



这个时候我们已经设置好了本地API代理了

修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去

localhost                   www.exaple.com            
搞定
此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。

2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下:

jQuery的$.ajax::


3、jsonp

jsonp也是一种解决跨域的方法,不过我从来没有用过,在网上查了下资料,jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。

4、nginx配置
最近使用vue开发一个功能,npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下,那么问题来了,如何让后端接口支持跨域。有两种方法:

让后端在返回数据的时候设置下返回请求的header,这种方法比较不稳定,因为接口一旦多了就得改好多代码,而且每次出了问题还得去找后端开发改代码,很烦。

另一种方法是,自己配置nginx,首先ssh登录到部署接口所在的服务器,修改nginx配置,在http对象中加入两行代码:

改完重启下nginx,然后在vue项目中,在导入axios的地方加如以下代码:

然后测试,发现就可以跨域了。
Jun 1
以下引用:vuejs采坑记录https://blog.csdn.net/xidongdong1/article/details/78613654
前言:记录在学Vue中需要注意的问题

1.给link添加事件、给组件绑定原生事件

在vue-router1中使用v-link写入路由,但是在vue-router2中要使用router-link写入路由,在浏览器渲染的时候会把router-link渲染成a。

有时候需要为router-link注册事件,对于一般的html元素,直接使用@click="eventFun"即可,但是对于router-link,像普通html元素那样注册事件后并不管用,需要添加.native才会成功注册。

事实上给组件绑定原生事件就需要.native修饰v-on,否则无法注册成功。


2.修改prop中的数据

每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

在两种情况下,我们很容易忍不住想去修改 prop 中数据:
Prop 作为初始值传入后,子组件想把它当作局部数据来用;
Prop 作为原始数据传入,由子组件处理成其它数据输出。

对这两种情况,正确的应对方式是:

定义一个局部变量,并用 prop 的值初始化它:

3.我需要遍历的数组值更新了,值也赋值了,为什么视图不更新?
因为有局限性啊,官方文档也说的很清楚,一般我们常用的手段是使用:this.$set(obj,item,value)

官方文档如下:

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:


还是由于
JavaScript 的限制,Vue 不能检测对象属性的添加或删除,对于已经创建的实例,Vue
不能动态添加根级别的响应式属性。

但是,可以使用 Vue.set(object,
key, value) 方法向嵌套对象添加响应式属性。例如,对于:


有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。
在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

4.建议尽可能在使用 v-for 时提供 key

它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途,后续补充
(2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。)



5.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错

必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导。。。Vue-Router官方文档链接

https://router.vuejs.org/zh-cn/essentials/history-mode.html)包括动态路由匹配、向路由组件传递props等基础知识




6.Uncaught ReferenceError: xxx is not define
实例内的 data 对应的变量没有声明
你导入模块报这个错误,那绝逼是导出没写好
7.Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

这种问题大多都是初始化的姿势不对;

比如引入echart这些...仔细去了解下生命周期,再来具体初始化;

vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题



8.Failed to mount component: template or render function not defined

组件挂载失败,问题只有这么几个
组件没有正确引入; 挂载点顺序错了了;
自行动手排查



9.[Vue warn]: Error in render function: "TypeError: Cannot read property '0' of undefined"



想将seller传递给子组件使用,但是我们ajax获取数据是异步过程,也就是说一开始在初始化seller时是空对象,所以把此时的seller传给header就是undefined

使用v-if可以解决报错问题,和created为空问题  

【详解vue2父组件传递props异步数据到子组件的问题】【http://www.jb51.net/article/117447.htm



10.vue-cli 新建项目 缺少dev-server.js和dev-client.js , 怎么模拟数据

在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。

11.[WDS] Errors while compiling. Reload prevented.

有一种错误的原因是import的路径不对

12.应当避免在模板或计算属性中使用 $refs

$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs

13、vuejs nginx子目录访问
https://www.jianshu.com/p/05f889faa74b

14、vuejs elmentui踩坑日记
vue使用过程中遇到的坑--个人总结(不定时更新)

修改了computed的值无效
请使用get,set
Jun 1
弹出层、弹窗插件,有这两兄弟就够了,居家旅行必备良品
layx  https://gitee.com/monksoul/LayX
layer  http://layer.layui.com/
May 31
前端
1、promise.then
2、Step.js 使用教程(附源码解析)
Quotation
Step.js(https://github.com/creationix/step)是控制流程工具(大小仅 150 行代码),解决回调嵌套层次过多等问题。适用于读文件、查询数据库等回调函数相互依赖,或者分别获取内容最后组合数据返回等应用情景。异步执行简单地可以分为“串行执行”和“并行”执行,下面我们分别去看看。

3、Async.js中文详解
Quotation
Async的内容分为三部分: 流程控制:简化十种常见流程的处理 集合处理:如何使用异步操作处理集合中的数据 工具类:几个常用的工具类



其他
1、Generator co http://www.ruanyifeng.com/blog/2015/05/async.html
2、async await 可以参考阅读https://www.jianshu.com/p/7bd8d5e87965

2.1、vue : async / await 的应用
api.js

app.vue


vue使用async/await 报错“Syntax Error: await is a reserved word“””

Highslide JS
Highslide JS

async/await 更好的异步解决方案https://segmentfault.com/a/1190000012411744
May 31
1.引入generator支撑库
经过Babel转译后的代码,会把aysnc/await的功能通过类似co库的方式来实现,即要使用到generator,所以,和我们使用co的时候一样,需要依赖一个regeneratorRuntime,才能支持generator特性。我们可以使用Facebook开源的regenerator库。你可以通过npm来下载这个regenerator库:

npm install regenerator --save
然后将下载文件中名为regenerator-runtime的文件拿出来,放到我们的小程序代码中去。

2.引入代码
在需要使用async/await特性的代码文件中,引入regenerator库:

import regeneratorRuntime from '../../utils/regenerator-runtime/runtime-module.js';
然后,你就可以放心的在你的代码里使用async/await来写异步处理了。
May 30
Tags:
May 30
Pages: 7/292 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]