前言

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

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