%20(2).svg)
项目简介
本项目是基于 vue-cli4 实现的移动端 H5 开发模板，集成了项目常用的配置及组件封装，采用 vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem 等技术栈，可帮助开发者快速进行移动端 H5 项目开发。
项目的主要特性和功能
- UI 组件按需加载：使用 babel-plugin-import 实现 vant 组件按需加载，避免打包体积过大和首页白屏问题。
- rem 适配：利用 postcss-px2rem-loader 将 px 按比例转化为 rem，方便按蓝湖标注编写代码。
- axios 请求封装：设置请求和响应拦截，封装 get 和 post 方法并挂载到 vue 实例。
- 工具类函数封装：封装常用工具函数，挂载到 vue 实例原型链。
- vue-router 配置：支持路由懒加载、改变单页面应用 title、登录权限校验和页面缓存配置。
- 多环境变量配置：支持本地、测试、生产等多环境开发和部署。
- 基础组件封装：封装 toast 和 dialog 等基础组件，可直接调用。
- 性能优化：包括 webpack 可视化分析、CDN 资源优化、gZip 加速优化和首页添加骨架屏，提升性能和用户体验。
安装使用步骤
安装依赖
bash
npm install
本地启动
bash
npm run dev
生产打包
bash
npm run build
配置 vant
- 安装依赖
bash npm i babel-plugin-import -D - 配置 .babelrc 或者 babel.config.js 文件 ```js // 在.babelrc 中添加配置 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
3. 按需引入js
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button) ```
rem 适配
- 安装依赖
bash npm install px2rem-loader --save-dev - 在 vue.config.js 进行如下配置
js css: { // css预设器配置项 loaderOptions: { postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 100 }) ] } } }, - 在 main.js 设置 html 跟字体大小
``js 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() }) ```
axios 请求封装
在相关文件中按示例代码设置请求拦截和响应拦截，封装 get 和 post 请求方法，并在 main.js 中将其挂载到 vue 实例上。
工具类函数封装
在相关文件中定义工具类函数，在 main.js 中通过 vue.use() 注册。
vue-router 配置
按示例代码进行路由懒加载、改变单页面应用的 title、登录权限校验和页面缓存配置。
多环境变量配置
- 在项目根目录中新建.env.* 文件，配置环境变量。
- 在 src 文件下新建 config/index 文件，根据环境引入不同配置。
- 在 package.json 里的 scripts 中配置不同环境的打包命令。
vue.config.js 配置
按示例代码对 vue.config.js 进行相关配置，如打包后文件输出位置、关闭生产环境 souecemap、配置 rem 转化 px 等。
基础组件封装
按示例代码使用封装好的 toast 和 dialog 组件。
webpack 可视化分析
- 安装依赖
bash npm install webpack-bundle-analyzer -D - 在 vue.config.js 配置
js const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new BundleAnalyzerPlugin()) } }
CDN 资源优化
- 在 index.html 里插入相应 CDN 链接。
- 在 vue.config.js 配置 externals 属性。
- 卸载相关依赖的 npm 包。
gZip 加速优化
在 vue.config.js 中配置 CompressionPlugin。
首页添加骨架屏
- 在 src 的 common 文件夹下面创建 Skeleton1.vue，Skeleton2.vue 等骨架屏组件。
- 在同级目录下新建 entry-skeleton.js 文件。
- 在 vue.config.js 下配置 vue-skeleton-webpack-plugin 插件。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】