基于uni-app编写的登录模板，request请求封装，全局路由拦截,也

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

前言

做一个新的项目就需要常用的代码，比如

全局路由守卫（路由配置）
Request封装（请求封装）
api集中管理
引入依赖的UI库（color-ui,uview-ui）
flex常用布局css,
配置分包
utils常用工具函数
配置Vuex(store)
等等

为了提高自己的效率（说白了有点懒）决定把这些作为基础模板，下次做新项目直接用就行了

效果图

在这里插入图片描述

全局路由守卫

(1) 路由拦截

uni-simple-router 路由、拦截、最优雅的解决方案

(2) 路由配置

通过 vue.config.js 配合uni-read-pages，可以随心所欲的读取 pages.json 下的所有配置

Request封装

适用于一项目多域名请求、七牛云图片上传、本地服务器图片上传、支持 Promise.

api集中管理

api集中管理；为简化逻辑代码量整洁的原则，像调用函数一样调用api，做到代码分离，在apis目录统一创建api函数，并且封装接口返回数据类型校验的方法，挂载到vue原型中，页面通过this.$apis.apiName()调用

分包

sub目录分包管理由于微信小程序的限制，上传发布机制总包大小不能大于2m，所以项目若超出该限制，要在page.json中做分包处理，分包处理的配置与pages目录保持一致

配置vuex

不需要引入每个子store模块

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
const files = require.context("./modules", false, /\.js$/);
let modules = {
    state: {},
    mutations: {},
    actions: {}
};

files.keys().forEach((key) => {
  Object.assign(modules.state, files(key)["state"]);
  Object.assign(modules.mutations, files(key)["mutations"]);
  Object.assign(modules.actions, files(key)["actions"]);
});
const store = new Vuex.Store(modules);
export default store;

页面使用Vuex

import { mapState,mapActions } from 'vuex';

computed: {
            ...mapState(['userInfo'])
        }
methods: {
            ...mapActions(['getUserInfo'])
        }

源码下载

后面持续更新。。。。

作者相关文章

反编译获取任何微信小程序源码——看这篇就够了

抽签小程序，妈妈再也不用担心谁洗碗（分配任务）了，so easy

5分钟实现微信云小程序支付功能（含源码）

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000039085861