栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

基于uni-app编写的登录模板,request请求封装,全局路由拦截,也可作为项目基础模板使用

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

基于uni-app编写的登录模板,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'])
		}
		
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号