文章目录
项目的结构
合理划分目录结构使项目模块更加清晰，上图中绝大部分为Vue CLI4自动生成结构，部分为跟据项目需要添加的。
封装
封装是为了复用（代码）和减少项目依赖。
项目经常出现对插件依赖性大的问题，代码重复问题，代码复用问题，合理的进行封装能最大限度避免以上问题。
组件封装
在vue中一切皆组件。
- 组件与外界保持最小耦合
- 组件所使用的数据尽可能用户不传递，也能是组件正常工作
- 在组件的事件处理上，如果事件触发需要外部数据则把事件发射给父组件，否则要在子组件内处理
- 能共用的组件需要抽离
- 如果一个组件只在当前那个视图用，把它放在当前视图模块中
- 最好不要使用混合mixins
封装插件
当一个项目引用一个插件是，未来降低项目对该插件的依赖需要对插件进行封装（部分不能进行封装的可以忽略），这样，当插件不在维护或者有更好的插件时可以更好替换。
这里的封装就是加一个中间层，本来直接访问插件的操作由访问这个中间层代替。
接下来的一段代码是对axios的封装，通过加一个中间的request函数对其封装。
//基本封装
import axios from 'axios'
const baseURL1 = 'http://10.10.10.1:8000/api';
const baseURL2 = 'http://10.10.10.2:8000/api';
export function request(config) {
//创建axios实例
const instance = axios.create({
baseURL:baseURL2,
timeout:5000
});
//instance函数返回Promise对象
return instance(config);
}
//主页数据请求封装
export function getMultidada() {
return request({'url': "/homeData"})
}
使用示例
getMultidada().then(res => {
this.banners = res.data[BANNER].list;//res是外层data，需要取的是内层data中的list
this.recommends = res.data[RECOMMEND].list;
}).catch(err=>{
console.log(err)
})
插件的使用心得
- 不了解的插件不用（熟悉后再用）
- 稳定适应项目的优先，实现功能和稳定是第一位
- 能进行封装的插件需要进行封装，尽量减少项目对其依赖
组织接口中的数据心得
- 如果多个数据需要发送, 将它打包在一个对象发送
- 当接口中所给数据的字段与组件中所使用的不同时, 将接口中的数据整合为一个对象(中间层)然后传给组件使用
- 一般来说父组件请求数据然后传递给子组件
- 将公共的数据放到vuex中, 必要时可以划分模块
出现的问题汇总
CSS移动端兼容问题
- 谨慎使用定位! 不要都使用或乱用
- 一般来说组件只设置width就行了, 最好别设置height, 否则移动端屏幕易出问题
- 移动端一般需要隐藏滚动条
父子组件传值问题
- props属性是单向数据响应的, 父组件中的数据改变子组件中的数据响应改变, 反之不改变.
- 如果子组件想改变父组件中的数据, 可以通过$emit触发事件传值改变
data、props、computed的合理使用
- 一般不改变props中的数据, 它是由父组件改变的, 若改变$emit事件
- 自己改变的在data中
- computed可以整合data和props形成一个新的数据字段, 可以避免创建多余的对象
watch、computed
watch数据项可以侦听data或者props中的数据，当数据改变watch函数才执行，否则watch返回缓存的结果。computed计算数据，调用一次执行一次函数。
