记录Vue混合App开发（转移）
UI设计
浏览：882 次
谢谢--->
1、 项目开始前的思考
1.浏览设计图纸和产品原型
2.需要共享功能
3.如何与Android和iOS原生方法竞争
4.如何调试嵌入APP的网页
5.移动屏幕适配
6.如果加载块xx失败怎么办
2、 建设项目
1.使用vue cli直接创建项目。vue路由器和vuex都很有用
2.目录划分
20190610163414775.jpg.png
Api-分离项目Api
资产-放置静态文件，如img、css和字体
组件-要放置组件文件，我创建一个全局文件夹来放置全局组件
Utils-工具插件或自封装插件
路线-项目的路线配置
存储-项目的vuex数据存储
视图-项目视图，可以根据项目模块细分为相应的目录
3.仍然需要公共css。得到一个公开。资产中的css并重置样式；css预处理使用scss
4.最常用的rem适配方案用于适配手机屏幕。动态计算的js使用adapte.js
5.使用公理请求数据。公理的拦截器可以做很多事情；
这是我的axis配置代码的副本
/**
*http配置
*/
从“Vue”导入Vue
从“axis”导入axis
从“@/router”导入路由器
从“@/store”导入存储
从“Qs”导入Q//序列化参数
//Axios默认配置
axios.defaults。超时=20000；//请求超时
axios.defaults。withCredentials=false；
axios.defaults.headers。post['Content-Type']='App/x-www-form-urlencoded'；//设置请求标头
axios.defaults。baseURL=“/api”；//基本URL
//Http请求拦截器
axios.interceptors.请求.使用(
配置=>{
let方法=配置方法；
让TOKRN=store.state。access_令牌；
//判断是否显示加载
if（config.isLoading==true&！store.state.isLoading）{
百货商店提交（'updateLoadingStatus'，true）
}
//在请求中，令牌是统一附加的，令牌是从vuex获取的
if（配置数据）{
config.data。access_ token=TOKRN；
配置。data=Qs.stringify（配置数据）；
}其他{
让url=配置url；
配置。url=（url.indexOf（“？”）！=-1)
? url+'&access_令牌='+TOKRN
：url+'？access_ token='+TOKRN
}
返回配置；
},
错误=>{
百货商店提交（'updateLoadingStatus'，false）；
return Promise.reject（错误）；
}
)
//Http响应拦截器
axios.interceptors.response.use(
响应=>{
让结果=响应.data；
让resCode=result.code；
//处理从后台返回的状态代码
开关（编号（resCode））{
案例9004：
//...
打破
案例12000：
打破
案例12001：
//无实名认证
打破
案例9000||9001||9002：
打破
违约：
打破
}
setTimeout（（）=>{
if（store.state.isLoading）{
百货商店提交（'updateLoadingStatus'，false）；
}
}, 300);
返回response.data；
},
错误=>{
if（错误响应）{
//请求中出错。请根据http状态码处理
开关（错误响应状态）{
案例400：
安慰日志（'服务400操作失败！'）
打破
案例404：
//router.push（｛name:“404”｝）
安慰日志（'服务404请求不存在！'）
打破
案例408：
router.push（｛n
