uPlus 介绍
uPlus (opens new window) 是一个uniApp前端解决方案，它基于 vue (opens new window) 和 uni-app (opens new window) 实现。它有动态修改主题、动态路由获取、路由守卫、路由浏览轨迹，权限验证、错误记录，提炼了典型的业务场景，提供了丰富的功能方法，它可以帮助你快速搭建uniApp基础架构，希望本项目都能帮助到你。
# 仓库
# 功能
- 多环境发布
- config-env.js 自定义多环境并使用
- 全局功能
- 多种动态换肤
- 动态底部栏（通过更改路由配置）
- iconfont 自定义图标
- uni.$co 自动生成$co
- uni.$API 自动生成$API列表
- uni.$dic 自动生成字典
- 动态更改路由权限
- store 自动生成(通用的赋值方式)
- filters (通用filters)
- 主题theme-style样式
- 错误页面
- 401
- 404
- 路由守卫
- 自定义守卫事件
- 错误日志
- 路由轨迹
- 通用组件
# 前序准备
你需要在本地安装 node (opens new window) 和 git (opens new window)。vue (opens new window)、vuex (opens new window) 、vue-cli (opens new window) 、axios (opens new window) 和 uni-app (opens new window)，提前了解和学习这些知识会对使用本项目有很大的帮助。
# 目录结构
本项目已经为你生成了一个完整的开发框架，下面是整个项目的目录结构。
├── public # f# 静态资源
│ │── favicon.ico # avicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # API 相关
│ ├── page # API模块文件（里面文件首字母大写）
│ ├── index.js # 自动生成page里面所有API，绑定在uni.$API
│ ├── components # 组件 全局公用组件
│ ├── config # 全局配置入口
│ ├── env.js # 环境配置
│ ├── index.js # 全局配置
│ ├── setStorageSync-field.js # 全局本地缓存字段配置
│ ├── filters # 全局 filter
│ ├── layout # 全局 layout
│ ├── mixins # 混入对象 mixins
│ ├── router # 路由 守卫
│ ├── store # 全局 store管理
│ ├── modules # store模块文件（里面文件首字母大写）
│ ├── index.js # 自动生成modules里面所有store
│ ├── styles # 全局样式
│ ├── base.scss # 默认基础样式
│ ├── font.scss # iconfont图标样式
│ ├── index.scss # 全局公用样式入口
│ ├── minxin.scss # minxin样式
│ ├── var.scss # 批量生成公用样式
│ ├── static # 静态资源
│ ├── utils # 全局公用方法
│ ├── resource # 全局公用方法文件（里面文件首字母大写），绑定在uni.$co
│ ├── Common.js # 普通方法，例如：节流等uni.$co.Common
│ ├── Fun.js # uniApp内部方法(常用)，例如：跳转等uni.$co.Fun
│ ├── error-log.js # 错误日记记录
│ ├── permission.js # 权限、路由轨迹等
│ ├── sessionStorage.js # 本地缓存公用方法 uni.sessionStorage
│ ├── pages # pages 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
└── package.json # package.json
└── vue.config.js # vue config文件
└── .... # 其他
# 安装
# 克隆项目
git clone https://gitee.com/uplus-framework/uplus.git
# 进入项目目录
cd uplus
# 安装依赖
npm install
# 本地开发 启动项目
npm run serve
# 运行与打包 package.json
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:quickapp": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp vue-cli-service uni-build",
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:quickapp": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp vue-cli-service uni-build --watch",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp": "node node_modules/@dcloudio/uni-quickapp/bin/serve.js"
}
启动完成后会自动打开浏览器访问 http://localhost:8080 (opens new window)， 你看到下面的页面就代表操作成功了。
# Contribution
uPlus (opens new window) 还在持续迭代中，逐步沉淀和总结出更多功能和不同的场景。本项目也十分期待你的参与和反馈。
有任何修改和建议都可以该项目 pr 和 issue
# 捐赠
如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 ❤️
# 其它
QQ群：633325423
# Vue 生态圈
Vue Router (opens new window) 是 vue 官方的路由。它能快速的帮助你构建一个单页面或者多页面的项目。
Vuex (opens new window) 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它能解决你很多全局状态或者组件之间通信的问题。
Vue Loader (opens new window) 是为 vue 文件定制的一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态，为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置，脚手架都帮你封装好了。
Vue Test Utils (opens new window) 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。
Vue Dev-Tools (opens new window) Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，能大大的提高你调试的效率。
Vue CLI (opens new window) 是官方提供的一个 vue 项目脚手架，本项目也是基于它进行构建的。它帮你封装了大量的 webpack、babel 等其它配置，让你能花更少的精力在搭建环境上，从而能更专注于页面代码的编写。不过所有的脚手架都是针对大部分情况的，所以一些特殊的需求还是需要自己进行配置。建议先阅读一遍它的文档，对一些配置有一些基本的了解。
Vetur (opens new window) 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的。
# Uni App 生态圈
- uniApp (opens new window) 是 uni app 教程和api文档。