Code Monkey home page Code Monkey logo

uplus's Introduction




uPlus 是一个uniApp前端解决方案,它基于 vueuni-app 实现。它有动态修改主题、动态路由获取、路由守卫、路由浏览轨迹,权限验证、错误记录,提炼了典型的业务场景,提供了丰富的功能方法,它可以帮助你快速搭建uniApp基础架构,希望本项目都能帮助到你。


功能


- 多环境发布
  - config-env.js 自定义多环境并使用

- 全局功能
  - 多种动态换肤
  - 动态底部栏(通过更改路由配置)
  - iconfont 自定义图标
  - uni.$co 自动生成$co
  - uni.$API 自动生成$API列表
  - uni.$dic 自动生成字典
  - 动态更改路由权限
  - store 自动生成(通用的赋值方式)
  - filters (通用filters)
  - 主题theme-style样式

- 错误页面
  - 401
  - 404

- 路由守卫
  - 自定义守卫事件

- 错误日志
- 路由轨迹
- 通用组件


前序准备

你需要在本地安装 nodegitvuevuexvue-cliaxiosuni-app,提前了解和学习这些知识会对使用本项目有很大的帮助。

如果可以,请点个星星支持一下

在线文档地址

UPlus 在线文档

预览



目录结构

本项目已经为你生成了一个完整的开发框架,下面是整个项目的目录结构。

├── 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

启动完成后会自动打开浏览器访问 http://localhost:8080, 你看到下面的页面就代表操作成功了。

Contribution

uPlus 还在持续迭代中,逐步沉淀和总结出更多功能和不同的场景。本项目也十分期待你的参与和反馈 ,或联系我QQ: 2052021114


有任何修改和建议都可以该项目 pr 和 issue

捐赠

如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 ❤️

其它

QQ群:633325423

Vue 生态圈

  1. Vue Router 是 vue 官方的路由。它能快速的帮助你构建一个单页面或者多页面的项目。

  2. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。它能解决你很多全局状态或者组件之间通信的问题。

  3. Vue Loader 是为 vue 文件定制的一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态,为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置,脚手架都帮你封装好了。

  1. Vue Test Utils 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。

  2. Vue Dev-Tools Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件,能大大的提高你调试的效率。

  3. Vue CLI 是官方提供的一个 vue 项目脚手架,本项目也是基于它进行构建的。它帮你封装了大量的 webpack、babel 等其它配置,让你能花更少的精力在搭建环境上,从而能更专注于页面代码的编写。不过所有的脚手架都是针对大部分情况的,所以一些特殊的需求还是需要自己进行配置。建议先阅读一遍它的文档,对一些配置有一些基本的了解。

  4. Vetur 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话,这个插件是必不可少的。

Uni App 生态圈

  1. uniApp 是 uni app 教程和api文档。

uplus's People

Contributors

chenkanqin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.