vue-cli4+webpack4+vant搭建前端移动H5通用框架

vue-cli4+webpack4+vant搭建前端移动H5通用框架(开箱即用)

简介

该框架是基于cli4 + webpack4 + vant + less的移动端H5通用框架，可供快速开发。
在此之前需要了解一下一个移动端H5该包含哪些技术点：

序号	要点
1	cli-4
2	UI框架 vant
3	rem自适应
4	请求拦截封装
5	路由配置
6	登录校验
7	环境变量配置
8	webpack配置(vue.config.js)
9	弹窗封装(由于不同项目弹框样式的多变性，这里不讲)
10	性能优化(cnd资源优化、gizp打包优化、可视化、首页骨架屏
11	html-webpack-plugin使用(埋点封装)
12	部署

关于webpack相关的优化方法，可以参考官方文档，这里推荐3篇前端小姐姐的文章(webpack性能优化)
闲话不多说，正片开始。

1.vue-cli4

这里不过多解释,贴上(官方文档)

2.按需引入vant

vant是有赞的前端团队开源一套产品，分别在业务中台、电商、零售、资产、金融等各个领域都有广泛的使用先例。当然小程序还有套对应的UI框架，为了避免跑题就不解释了。按需引入是我们在使用第三方插件时为了避免全部引入导致打包的提及过大而采用的一种方法，
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。这里使用vant官方推荐的引入方式：

安装插件

npm i babel-plugin-import -D

在.babelrc 中添加配置
注意：webpack 1 无需设置 libraryDirectory

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

对于使用 babel7 的用户，可以在 babel.config.js 中配

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

这里贴上官网的推荐的的引入方法教程(vant快速上手)

3.rem 适配

有过移动端开发经历的童鞋肯定理解适配问题，简单来就是让页面在不同大小的设备屏幕上以合适的尺寸展示。我们在收到UI的设计稿时都是px为单位的，这时候将px转化成rem就是rem适配的核心工作啦。
将 html 字跟字体设置为 100px，很多人选择设置为 375px，但是我觉得这样换算出来的 rem 不够精确，而且我们在控制台上调试代码的时候无法很快地口算得出它本来的 px 值。如果设置 1rem=100px，这样我们看到的 0.16rem，0.3rem 就很快得算出原来是 16px，30px 了。

安装依赖

npm install px2rem-loader --save-dev

vue.config.js 进行如下配置

  css: {
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 100
          })
        ]
      }
    }
  },

在 js中 置 html 跟字体大小

function initRem() {
  let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375
  window.document.documentElement.style.fontSize = `${100 * cale}px`
}
window.addEventListener('resize', function() {
  initRem()
})

4.请求拦截封装

设置请求拦截和响应拦截

/* 全局默认配置 */
var http = axios.create({
  baseURL: baseApi,
  timeout: 5000
})
/* 请求拦截器 */
http.interceptors.request.use(
  config => {
    const guid = generateGuid()
    const timeStamp = Date.parse(new Date()) / 1000
    // 请求头的携带的参数
    config.headers = {
      'Content-Type': 'application/json;charset=UTF-8',
      '*****-token': sessionStorage.getItem('token') || '',
      '*******-call-app-id': globalConfig.apiAppId,
      '*******-sign': Md5(`call_app_id=${globalConfig.apiAppId}&nonce=${guid}&time_stamp=${timeStamp}&call_app_secret=${globalConfig.apiAppSecret}`)
    }
    // 如果每个请求的request Payload都需要携带指定的参数，使用此种方式
    config.data = {
      call_app_id: globalConfig.apiAppId,
      nonce: guid,
      time_stamp: time