H5项⽬快速开发模版vue-template-mobile
本⼈从事前端开发⼯作已有四年，这期间做的⼤部分都是移动端 H5 项⽬，这⼏年来⼤⼤⼩⼩的 H5 项⽬也做了有⼗⼏个了。对于移动端H5 项⽬来说，有些功能和配置其实是通⽤的，基本上每个项⽬都会⽤到，⽐如说：授权及分享、UI 组件库、各种⼩组件等。基于我平时⽐较喜欢总结以及为了以后开发 H5 项⽬省事的⽬的，就有了这个项⽬（主要就是为了偷懒，，，）
这个项⽬是啥
Vue 移动端新项⽬模板，封装了 H5 项⽬开发中⼀些⽐较常⽤的功能，⽐如：授权及分享、axios 封装、移动端 vw 适配、UI 组件库等等。
特⾊功能
⽹页授权和分享
本⼈常⽤的⼏个公共 css
使⽤ less 进⾏ css 预编译
⼏个移动端开发中可能会⽤到的组件
开发环境下引⼊ vconsole 进⾏调试
axios 封装，配置，接⼝定义模块
postcss-px-to-viewport 移动端适配
已写好 eventBus 基础代码，按照说明即可直接使⽤
移动端组件库 vantUI，按需加载并全局引⼊了⼏个常⽤组件
已写好 App 底部导航 AppNavBar 组件，可⾃⾏对其进⾏调整
⾃定义指令、过滤器、utils 都已写好⼏个基本的模版，可根据需要增减
加⼊打包脚本 build.js，打包时会⾃动将版本号 +1，并压缩成 zip 包后放⼊ packages ⽂件夹中
使⽤⽅法
h5免费模板下载1. 直接 Download zip 包到本地（推荐）
推荐使⽤此⽅式使⽤本项⽬，直接将 Download 本项⽬代码 zip 包到本地，解压后按照下⾯⽂档中提到的⼏个修改点进⾏相应的修改，修改完成后
运⾏ npm install 安装好各项依赖包之后就可以直接进⾏业务开发了
2. ⾃⼰创建新项⽬然后修改
想⾃⼰创建新项⽬，然后再进⾏配置也可以。⾸先⽤ vue-cli 创建⼀个全新的项⽬，然后将我这个项⽬⾥⾯的
public 和 src ⽂件夹以及各配置⽂件复制到新项⽬⽬录下替换掉。再按照下⾯⽂档中提到的⼏个修改点进⾏相应的修改，修改完成后运⾏ npm install 安装好各项依赖包之后就可以直接进⾏业务开发了
3. ⽼项⽬改造
⽼项⽬的话就只能⾃⼰根据需要将我这项⽬⾥的对你有⽤的东西的东西直接复制到你的项⽬内使⽤了
有改动的配置⽂件
1. 新增 build.js， 此⽂件是我写的⼀个打包脚本，作⽤就是在 build 时会⾃动将版本号 +1 且会⽣成相应的 zip 包，⽂件内有注释，不
难看懂。
在 package.json 中我新增了⼀个 zip 命令，使⽤ npm run zip 即可调⽤该脚本⾃动打 zip 包
2. 新增 fig.js，该⽂件是因为我引⼊了 postcss-px-to-viewport 来做移动端适配⽽增加的相应的配置⽂件。如果不⽤
该插件的话直接删掉该⽂件即可，或者⾃⼰根据需要修改配置
3. fig.js，这是为了按需加载 vantUI ⽽配置的，如果没有使⽤任何组件库或者组件库不做按需加载，此⽂件不⽤修改，
当然如果你使⽤了其它组件库，请按照其提供的⽂档进⾏相应的配置
4. fig.js，这⾥修改了 publicPath、开启了 GZip 压缩和图⽚压缩，⽂件内都有注释，不需要的也可以都不改
需要修改的⽂件
上⾯是有改动的⼏个配置⽂件，下⾯是正式开发前还需要修改的⼏个地⽅
1. router.js 中 beforeEach 钩⼦函数中请求授权的代码，需要根据项⽬需要替换掉 appId，redirectUrl 等内容
2. utils ⽂件夹下 wxShare ⽂件，这⾥是对分享的封装代码，需要根据项⽬将⾥⾯的 url 等⼀些参数和处理逻辑改掉
3. apis ⽂件夹下 request ⽂件，根据项⽬需要换掉 BASE_URL 和⾥⾯相关配置
4. public ⽂件夹下 index.html ⽂件中的 title 内容根据不同项⽬改掉
5. public ⽂件夹下 favicon.ico ⽂件，根据项⽬需要换掉，（显⽰在浏览器标签上的⽹站 logo）
6. package.json ⽂件中 name 字段的值换掉
7. fig.js ⽂件中 publicPath 需要根据服务器⽬录做适当更改
8. 最后，记得修改项⽬根⽬录⽂件夹名字
项⽬中各处需要修改的地⽅都加了 todo 注释，也可以全局搜索 todo 来修改
以上内容改完，整个项⽬框架基本就成型了，运⾏ npm install 安装好各项依赖包之后就可以直接进⾏业务开发了
如果觉得这个项⽬对你有帮助，烦请点下 star，同时也欢迎⼤家给我提意见和建议，共同学习和提⾼，
感谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。