Pages: 4/6 First page Previous page 1 2 3 4 5 6 Next page Final page [ View by Articles | List ]
Jun 3
1、vuex
2、vue-bus: 一个 Vue.js 事件中心插件https://github.com/yangmingshan/vue-bus
3、$emit()
4、$dispatch()和$broadcast()(vue2.x废弃)
5、父链this.$parent.message = '来自组件component-a的信息'
6、子组件索引

7、props
8、$attrs
9、others
Jun 3
ui框架
webpack按需打包
webpack axios跨域代理
i18n多语言支持
vuex组件通信(vue bus)
动态router加载
await async异步流控制(step.js)
项目目录最佳实践(config,services(http inteceptor),utils,docs,data(mock),filters,directives,components,views)
测试
代码检查
Jun 3
1、全局注册(这种方式注册组件必须在vue实例化之前声明)

2、局部注册

3、扩展实例
Jun 2
vuejs大型spa的webpack打包文件太大,如何破
1、按需引入组件,例如使用了button则引入button,而不是全局引入ui库(此需要配置打包文件)

例如:vantui
全局的这么玩,但这样全部打包了


按需的这么玩



1、Webpack打包后体积过大的优化思路
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的地方加如以下代码:

然后测试,发现就可以跨域了。
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:
Pages: 4/6 First page Previous page 1 2 3 4 5 6 Next page Final page [ View by Articles | List ]