wyann99/vue-mobile-cli

🚀 基于 vue mobile 端的多页应用脚手架

移动端多页应用脚手架(支持路由)

目录

1. 安装
2. 工程目录规范
3. 前置条件
4. 解决问题
5. 前端技术要求
6. 如何使用
7. 不足之处

1. 安装

版本（全局安装）：NODE ：6.10.0， webpack ：1.13.1

由于 npm 安装源太慢，建议换成淘宝 cnpm 安装源

进入工程目录模块安装：

cnpm install

2.工程目录规范

|—— mode_modules                 npm 安装的模块
|—— .eslintrc.js                 es6 代码规范配置文件
|—— build                        构建项文件
|—— config                       配置项文件
|—— static                       静态目录
|—— test                         单元测试目录
|—— dist                         编译文件目录
|—— src                          项目源文件
|   |—— assets                   静态文件目录
|   |   |—— style                样式文件
|   |   |—— font                 字体文件
|   |   |—— img                  图片文件
|   |   |—— js                   第三方库
|   |—— components               全局组件目录
|   |—— config                   配置文件目录
|   |   |—— api.js               接口 API 配置文件
|   |—— module                   多页面文件目录
|   |   |—— Member               多页面父级目录
|   |   |   |—— component        Member 所属组件目录
|   |   |   |—— manage           Member 所属配置路由状态管理目录
|   |   |   |—— member.html      单个页面配置 html
|   |   |   |—— member.js        单个页面配置 js
|   |   |   |—— app.vue          单个页面配置 vue
|   |—— util                     公共函数调用目录
|   |   |—— ajax.js              公共函数
|   |—— views                    路由视图层目录

3. 前置条件

• NPM 管理依赖库，第三方的 js 文件放在 assets/js 下
• 主要技术 Vue，JavaScript，ES6
• 创建新的多页面，必须在 module 目录下

格式如下:

|—— module                       多页面文件目录
|   |—— Member                   多页面父级目录
|   |   |—— components           Member 所属组件目录
|   |   |—— manage               Member 所属配置路由状态管理目录
|   |   |—— member.html          单个页面配置 html
|   |   |—— member.js            单个页面配置 js
|   |   |—— app.vue              单个页面配置 vue

4. 解决问题

• 减少 css，js文件请求数，跟据文件名 hash 方式清除缓存，图片小于10k转换 base64 格式
• 解决 webpack 打包体积过的问题，使用处理分包的机制
• 页面热加载模式，文件改变后自动同步多设备浏览器
• vue 多页面的搭建，自动添加并替换页面里的文件路径
• 处理 js 多模块合并、压缩、打包
• 多页应用支持路由
• 前后端正式分离开发与正式环境

5. 前端技术要求

• 略懂linux，nodejs，webpack，git，es6，vue

6. 如何使用

• 默认请开启本地服务器 127端口
• 多页应用，module 目录下创建多个父级目录实例多个 html
• 统一 ajax 库为 axios
• 图标统一用 iconfont ，托管在 http://www.iconfont.cn/ 在线生成阿里 CDN，font.css
• 项目使用 es6 开发，代码书写规范按照 .eslintrc.js
• 移动端尺寸适配，按照淘宝适配方案。字体书写用 dpr单位，进行屏幕 dpr 缩小放大；边框书写用 rpx单位， 按照物理像素1px标准；其他单位长度统一书写用 px 会自动转换为 rem 单位

// input
.cls {
  width: 75px;
  font-size: 12dpx
  border: 1rpx
}

// output
.cls {
  width: 2rem;
  border: 1px;
}
[data-dpr="1"] .cls { font-size: 12px }
[data-dpr="2"] .cls { font-size: 24px }
[data-dpr="3"] .cls { font-size: 36px }

开发

npm run dev

• 默认执行 module/Index 目录下访问 http://localhost:3000/index.html

发布

npm run build

7. 不足之处

• 完美