关于vue.js:基于uniapp编写的登录模板request请求封装全局路由拦截也可作为项目基础模板使用

前言

做一个新的我的项目就须要罕用的代码，比方

• 全局路由守卫（路由配置）
• 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 分钟实现微信云小程序领取性能（含源码）