H5前端项目模板

基于Vue CLI3插件开发，集成H5常见业务。

安装

项目已创建：vue add webapp-stuff。

项目未创建：

1. 拷贝preset.json模板到本地，模板，preset项说明
2. 创建：vue create --preset preset.json my-project

prompts问答项

选择css预处理器

若选择不使用css，则使用css自动化导入，导入常用工具样式（可pr），路径位置在src/styles/imports文件，即可在任意样式或vue文件使用。这里推荐使用scss。

1. 目前项目模板只有scss + rem的本人工作中收集的常用工具样式，其它的预处理器的工具样式，日后慢慢补充。

2. 使用了reset样式：使用了normalize.css。

选择适配方案

提供的两种rem和vw两种移动端适配方案。rem方案使用vw + rem方式，100 (设计图 px) = 1 (css rem) 即可；vw方案使用postcss-px-to-viewport插件自动转换样式单位，配置好相关参数，直接使用设计图px，webpack自动转为vw。

ps：其中rem设置有最大布局视口的样式，vw没有。

设计图分辨率

需要输入用于移动端适配的设计图尺寸，默认有有750px和640px设计图分辨率可选，亦可选择自定义输入，设计图分辨率至少为320px。然后会自动生成适配的css文件并导入。

比如，选中rem方案，选中750px，生成：adaption-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; }
}

vue常用

• vuex
• vue-router

选择vuex，则生成到/src/store/index.js，模版为入门示例。

选择vue-router，则生成到/src/router/index.js和/src/views/Home.vue，模版为入门示例。

其它常用

• 微信分享wx-share.js
• mock-server
• 图片预加载组件

微信分享wx-share.js

生成到/src/utils/wx-share.js。文件导出一个方法，返回promise实例，用于初始化和设置微信分享信息。

• 获取签名凭证的url对应preset.json的ticketUrl，后可在.env的VUE_APP_TICKETURL文件设置
• 接口响应返回的data格式按需修改，模版中以response.data.model接收，按需修改
• newVersion表示是否使用新版api，successCallback对于新版api无效
• 新旧版api不可同时使用

export default ({
  title = '分享标题',
  desc = '分享描述',
  link = window.location.href.split('#')[0],
  imgUrl = '',
  successCallback = () => {}
} = {}, newVersion = false) => {
  // ...
}

mock-server

模板生成：

• /mock/mock-data.js：mock接口
• /mock/mock-api.js：本地mock形式
• /mock/mock-server.js：本地mock-server形式

项目启动后，mock-server跟随启动，更改mock-data.js可热更新服务。若想在线上使用mock，需在相关配置文件设置VUE_APP_MOCK = 1，但此时不会产生任何真实请求。

图片预加载组件

相关文件：/src/assets/imgs.json

使用自己封装的组件：vue-imgs-preload

/src/assets/imgs.json说明：

图片名称数组，用于配合图片预加载组件使用。当添加往/src/assets/images/目录添加图片，会自动进行压缩，同时imgs.json也会刷新。

webpack-cdn-plugin

webpack-cdn-plugin：第三方库使用cdn加载。目前默认选择的库有vue、axios，可在vue.config.js·自行更改相关配置。

axios请求封装

相关文件：/src/utils/request.js

1. 默认响应data格式：（按需修改）

data = {
  retCode: 0,
  msg: '',
  model: {
    // foo
  }
}

2. 封装了axios的get和post：

• 响应拦截器了所有+retCode !== 0的请求及处理其它请求错误（如Error: timeout），并把msg，Toast（vant）出来
• 使用post请求默认使用qs表单提交，相关字段isqs

gulpfile.js

自动上传代码到服务器

提供打包后自动上传代码到服务器的gulp任务：

• 初始的服务器信息配置来自创建项目时的preset
• gulp deploysit：测试环境，资源上传cdn，上传index.html文件
• gulp deployprodcdn：生产环境，资源上传cdn，没有上传index.html文件

打包命令：

使用了--report会生成report.html以帮助分析包内容

"scripts": {
  "build": "vue-cli-service build --report",
  "postbuild": "gulp deployprodcdn",
  "build:sit": "vue-cli-service build --mode sit --report",
  "postbuild:sit": "gulp deploysit",
}

图片压缩

使用自己封装的gulp插件：gulp-tiny-imgmin

• 被压缩目录为/src/assets/images下的图片，只支持这一层目录，子级目录自己敲代码加
• 当/src/assets/images被添加图片，会自动执行gulp tiny压缩命令

字体抽离

相关文件：/fontmin.js

使用说明：

• 使用字体抽离工具fontmin的相关api实现
• 需手动收集项目中的字体文字（不知道还有其它方法没），再手动地粘贴到fontmin.js文件中，再执行node fontmin，抽离好的结果在/src/assets/fonts
• fontmin只支持对ttf文件的抽离，项目模板中提供了思源黑体的ttf文件

webpack打包优化

hard-source-webpack-plugin：DLL已被webpack4“优化”掉了，这是更好的DLL，webpack5可能会自带实现。

其它预装库

• fastclick
• Toast from Vant