cordova-vue(2)之vue基础
其实是 vue-cli,vue版本在2.3 左右.
不能丢掉隐藏文件.
当引入一个第三方js文件时,提示不是严格模式的设置,更改.babelrc文件
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"ignore": [
"./app/assets/js/mui.js" //不是严格模式的js文件
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
vue的生命周期,常用的如下,其他的感觉使用vue-router的更合适一些.
created 渲染完成前要实现的
mounted 渲染完成后要实现的
项目中必不可少的东西
* vue-router // 路由,页面跳转,传递参数 https://router.vuejs.org/zh-cn/
* vuex // 状态管理,不如叫全局变量管理 https://vuex.vuejs.org/zh-cn/
* axios // 请求后端api
vue-router相关
router-view的子页面
生命中的拦截 meta
meta是一个对象,写在路由中,然后访问时只要 router.meta.value就可以了
生命周期的应用
- 举例
打开页面之前判断是否登录
router.beforeEach(function(to,from,next){...})
其中的next参数:
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
某一路由的特别定义
beforeEnter: (to, from, next) => {
...
}
参数和beforeEach一致
打开页面之前加载完数据
beforeRouteEnter(to,from,next){...}
next(vm => {
// 通过 `vm` 访问组件实例
})
路由的参数变了
beforeRouteUpdate (to, from, next) {...},
退出页面之前提示是否退出
beforeRouteLeave(to,from,next){...}
vuex 严格模式与非严格模式
一刷新就没了.
刷新后会执行main.js,可以在这里再次读取存放在localstorage里的数据.
不赋值,就取不到值.
main.js为啥取不到store.state的值
- 严格模式
分为四部分, state,getter,action,mutations,抛开别扭的写法
state 定义变量
getter 准备被调用
action 异步的方法
mutations 同步方法,根据action来改变state
- 非严格模式
大概分为两部分,state,action
state 存放全局变量
aciton 存放全局方法
如果之间有了关联,就又到了mutations
axios的配置的初始与覆盖初始
跨域了
前后只要一分开,肯定会跨域,常用的解决方法也就几种:后端设置cors和
前端的反向代理,vue目录下打开config/index.js
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
对于后端设置的跨域,前端找个地方写死这个路径或者起一个服务,只要vue能读取到这个api的域名就行了.然后,就用到了axios
- 创建
写死headers的情况
let rest = axios.create({
baseURL: baseURL,
timeout: 20000,
headers: {
'Authorization': temp.token
},
});
没写死headers或者没headers
let rest = axios.create({
baseURL: baseURL,
timeout: 20000
});
重写headers
rest.defaults.headers.common['Authorization'] = '....';
- 使用
日常的
rest.post(url,[params])
.then((res)=>{...})
.catch((err)=>{...})
同步获取
import axios from 'axios'
...
let get1 = this.rest.get('url1');
let get2 = this.rest.get('url');
axios.all([get1, get2]).then(res => {
console.log(res);
})