你要的移动端vue多页面脚手架，都帮你集成和封装好了

约定不等于承诺〃 2022-01-19 00:39 348阅读 0赞

> 移动端1像素？px转rem适配？300ms延迟？做活动单页面导致苹果安卓微信签名问题？不存在的。

以前经常做手机H5，喜欢做成vue单页应用，这样在开发微信相关应用时，往往因为单页应用在苹果和安卓上对于浏览器每个页面的url机制不一样，经常导致页面签名失败的问题。还有经常从其他应用带参数跳到单页应用的某个页面而加载整个单页应用，还需要处理路由和权限等繁琐的东西，那么为什么不做成多页面应用呢？

[github.com/xusenlin/vu…][github.com_xusenlin_vu]

这是做了大量H5活动整理出来的一个项目，平时候直接克隆出来安装喜欢的ui库就投入开发，分享给大家。然后推荐安装vant。当然还有很多漂亮的ui库，如下（部分）

1.  vant `npm i vant -S`
2.  ydui `npm install vue-ydui --save`
3.  vux `npm install vux --save`
4.  mint-ui `npm i mint-ui -S`

# Vue Multiple Pages #

## Project setup ##

npm install
    复制代码

### Compiles and hot-reloads for development ###

npm run dev
    复制代码

### Compiles and minifies for production ###

npm run build
    复制代码

> 一个基于vue-cli3脚手架的多页面vue移动端模板

*添加了移动端相关工具如 1px问题、300s点击延迟、px自动转rem工具，以及微信签名和请求的封装等*

## 目录结构介绍 ##

|-- dist                             // 打包目录
    |-- src                              // 源码目录
    |   |-- api                          // Api接口目录
    |       |-- user.js           	     //用户登录、头像上传、密码修改等用户相关api
    |   |-- assets                       // 静态资源，你的css、图片、字体等。
    |   |-- components                   //全局组件
    |   |-- config                       // 应用的配置文件
    |       |-- app.js                   // 应用的配置，名字，api请求的url，
    |       |-- page.js           	     // 每一个页面的配置,标题之类的
    |   |-- utils                        // 工具函数。和config,api一个道理，建议分类清楚。
    |       |-- app.js                   // 常用函数
    |       |-- request.js               // 请求封装
    |       |-- weixin.js                // 微信jssdk的封装，使用请先安装weixin-js-sdk
    |       |-- setHtmlFontSize.js       // 设置根元素字体大小，配合rem做屏幕适配
    |   |-- pages                        // 页面视图。里面文件夹建议使用大驼峰,因为这样比较好看 - -
    |       |-- index                    // 首页
    |       |-- common.js                // 公共的js，可以引公共的css,vue ui库等
    |-- .gitignore                       // 忽略的文件
    |-- page.config.js                   // 使用node读取pages文件夹下的文件夹配置到vue cli3
    |-- vue.config.js                    // vue cli 配置
    |-- README.md                        // 说明
    复制代码

## 说明 ##

*  使用normalize.css重置样式。
 *  添加了axios请求库，并做了简单的拦截。
 *  添加了fastclick解决移动端300ms点击延迟。
 *  想要添加自己 UI库,安装好在common.js引用即可。
 *  添加postcss-px2rem自动将px转换为rem适配移动端，目前为了和大部分ui库兼容，设置的设计稿宽度为375，可自行修改。
 *  添加页面请在pages文件夹下新建目录，在里面放置index.js和Index.vue（建议复制template文件夹修改名字进行开发）。编译后，目录的名字即为网页的名字。至于为什么？请查看page.config.js。

转载于:https://juejin.im/post/5ca206d16fb9a05e4868bd90

[github.com_xusenlin_vu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxusenlin%2FvueMultiplePages