vue-cli-plugin-ljx-test v1.0.71
H5前端项目模板
基于vue-cli3插件开发集成H5常见业务
常见功能
图片预加载
相关文件:
src/App.vue
src/components/ImgsPreload
src/assets/imgs.json
imgs.json
:当有新图片加入,执行gulp getimgsnames
(或者监听该文件夹亦可,自行修改),遍历images文件夹下所有有效图片名称,执行压缩并命名后追加-optimized
,输出到imgs.json,供imgsPreload使用。。
说明:
有时候预加载除了图片因素之外,异步接口的返回也可能是因素之一。此时可以使用add-conditions-num
追加一个因素,代码如下:
<imgs-preload ref="imgs-preload" :preload-visible="preloadVisible" :add-conditions-num="1" @imgsLoadedAll="preloadVisible = false">
<template #default="{ imgsPercentage }">{{ imgsPercentage }}</template>
</imgs-preload>
// ...
created() {
this.init();
},
methods: {
init() {
this.$request('/url')
.then(() => {
// ...
this.$refs['imgs-preload'].imgsLoaded++;
});
}
}
css预处理器工具类
新建项目问答时可选择安装css预处理器,并通过自动化导入文件,导入路径是styles/imports文件,即可在任意样式或vue文件使用。
imports.less
示例:
// 绝对定位水平居中
.absolute-align-center {
position: absolute;
transform: translateX(-50%);
left: 50%;
}
// 背景图
.base-background(@bg, @bgheight) {
background-image: url("@{bg}");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: @bgheight * .01rem;
position: relative;
overflow: hidden;
}
// 图片
.base-image(@bg, @imgwidth, @imgheight) {
display: inline-block;
background-image: url("@{bg}");
background-size: 100%;
background-repeat: no-repeat;
width: @imgwidth * .01rem;
height: @imgheight * .01rem;
}
自定义reset样式
reset css使用normalize.css
。
自定义的reset样式,index.less
:
p { .reset-mp; }
img, video { object-fit: cover; }
*:not(input, textarea) { .unselect; }
img[src=''], video[src=''] { display: none; }
button { border: none; background: none; padding: 0; }
input { border: none; background-color: transparent; box-sizing: border-box; }
适配方案
问答时选择设计图尺寸,然后继续选择提供的两种rem和vw两种适配方案,其中rem使用vw+rem方式,即设计图px / 100(rem)即可,vw使用postcss-px-to-viewport
插件自动转换,配置好相关参数,直接使用设计图px,打包自动转为vw。
vw+rem方式下的750.css示例:
html { font-size: 13.333333333333334vw; }
html, body { margin: 0 auto; }
@media only screen and (max-width: 320px) {
html { font-size: 42.66666667px; }
html, body { min-width: 320px; }
}
@media only screen and (min-width: 540px) {
html { font-size: 72px; }
html, body { max-width: 540px; }
}
axios请求封装
相关文件:src/utils/request.js
封装了axios的get和post:
- baseURL根据运行环境及环境变量变化
- 拦截了所有
retCode !== 0
的请求及处理其它请求错误(如Error: timeout),并Toast出来 - 使用post请求默认使用qs表单提交,相关字段
isqs
export的对象:
export const aget = ({ url = '', params = {}, opts = {} } = {}) => service.get(url, Object.assign({}, { params }, opts));
export const apost = ({ url = '', data = {}, params = {}, opts = {}, isqs = true } = {}) => {
if(isqs) Object.assign(opts, { transformRequest: [data => Qs.stringify(data)] });
return service.post(url, data, Object.assign({}, { params }, opts));
}
export default service;
mockjs
相关文件:src/mockjs/index.js
问答选择项,目前mockjs的方式时本地拦截返回数据,在控制台看不到请求的发出。日后考虑mock-server方式。
weixin-js-sdk
相关文件:src/utils/wx-share.js
问答选择项,封装好了旧版和新版的api,获取签名凭证的url配置在.env的VUE_APP_TICKETURL
,新旧版不能同时使用。
gulp脚本发版
依据部门发版方式封装的一个脚本发版,提供测试发版和生产发版命令。
参考:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:prod": "vue-cli-service build",
"postbuild:prod": "gulp deployprodcdn",
"build:sit": "vue-cli-service build --mode sit",
"postbuild:sit": "gulp deploysit",
"getimgsnames": "gulp getimgsnames"
}
修改的webpack配置
为了提高构建速度和减少构建后的文件体积。目前使用的方式时cdn优化打包。日后考虑加入dll问答选择项。
其它
静态页访问时,设置index.html的meta缓存头:
webpackConfig
.plugin('html')
.tap(args => {
args[0].meta = {
viewport: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no',
'X-UA-Compatible': {
'http-equiv': 'X-UA-Compatible',
'content': 'IE=edge'
},
'Cache-Control': {
'http-equiv': 'Cache-Control',
'content': 'no-cache, no-store, must-revalidate'
},
'Pragma': {
'http-equiv': 'Pragma',
'content': 'no-cache'
},
'Expires': {
'http-equiv': 'Expires',
'content': '0'
},
'utf-8': {
'charset': 'utf-8'
}
}
return args;
});
其它预装项
- fastclick
- Toast from vant
- normalize.css
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago