vue3+ts+vite后台管理模板

vue3+ts+vite后台管理模板

支持前后端控制权限，使用uniapp+vue3+ts+elementplus+vite开发，码云地址：https://gitee.com/yongqiang0621/uni-admin  

github 地址 https://github.com/yongqiang0621/uni-admin

  

rt-uni-admin

请使用hbuilderX编辑器导入项目并打开

安装依赖

npm i

npm run dev:h5 //或者点击hbuilderx的菜单，运行到浏览器

npm run build:h5 //打包 或者点击hbuilderx的菜单 发行 网站-pc

项目简介

##rt-uni-admin是基于uniapp + vue3 + ts + elementplus + uni-ui + vite的pc端后台管理系统空白模板，支持前后端控制权限

目录简介

1、api文件夹 ，放置项目下所有请求api，最好对根据模块设置多个ts文件；例如login.ts、order.ts、menu.ts 根据请求头不同 封装了三种方法 get/post/postForm

// get的请求头

header: {
	'content-type': 'application/json',
	Authorization: uni.getStorageSync('token')
},
		
				
// post的请求头

header: {
	'content-type': 'application/json',
	Authorization: uni.getStorageSync('token')
},


// postForm的请求头

header: {
	'content-type': 'application/x-www-form-urlencoded',
	Authorization: uni.getStorageSync('token')
},


// api写法  api/login.ts

import uniHttp from 'rt-unipc-utils/request'; // 引入依赖包

//定义user类
class User {
	// 微信登录
	login(data){
		return uniHttp.get('/api/user',data) // get方法
		return uniHttp.post('/api/user',data) // post方法 
		return uniHttp.postForm('/api/user',data) // postForm方法 
	}

}
export const user = new User();



// vue页面写法   pages/login/login.vue

2、config文件夹 配置测试和线上环境的请求接口前缀等

class Config {
	
	// 接口地址前缀
	baseUrl = '';

	// 请求超时时间
	timeout = 10000;
	
	// 默认登录页
	loginPage = '/pages/login/login'; // 必须配置 服务器的statuCode ===401会默认跳转登录页 
	
	constructor() {
		if (process.env.NODE_ENV === 'development') {
			//开发环境 运行
			this.baseUrl = 'http://127.0.0.1:8080'; //测试地址 （ hbuiderx的菜单运行到浏览器或者命令npm run dev:h5 请求的接口都是这个地址 ）
		} else {
			//生产环境 发行
			this.baseUrl = 'http://xxx.xxxx.com'; //正式地址  （ hbuiderx的菜单发行网站-pc或者使用命令npm run build:h5 请求的接口都是这个地址 ）
		}
	}
}
export default new Config();

3、dist文件夹 打包后的h5文件存放位置

4、src文件夹下的compoents文件夹的window文件夹，用来设置后台模板的左侧菜单栏和顶部栏 leftWindow.vue无需修改，topWindow.vue里修改或者设置顶部栏目内容：左侧的后台logo、文字和顶部右侧的文字，修改密码等

5、src文件夹下的pages文件夹，用来所有页面 /pages/index/index是首页，pages/error/error是404页面，这两个页面名称尽量不要修改，所有无权限的路由都会跳转到/pages/error/error

6、src文件夹下permission文件夹permission.ts是用来配置路由权限

// name是你的角色是后端返回的角色相对应，page就是可以访问的页面 

// 前端控制用户权限
export const permission = {
		defaultRule: [
			{ name: '普通用户', page: ['/pages/index/index'] }, 
			{
				name: '管理员',
				page: [
					'/pages/index/index',
					'/pages/menu',
					'/pages/menu/menu2',
					'/pages/menu/menu1'
				]
			},
		]
	};


//后端控制用户权限   如果是后端返回权限表 尽量把 permission.defaultRule 初始化如下值 (忘记初始化也没关系，在login.vue 登录用的时候在初始化也行)
export const permission = {
		defaultRule: [
			{ name: '', page: [] }
		]
	};

7、src文件夹下 router文件夹的routers文件夹，可以按照模块存放多个路由例如menu.ts,person.ts，name就是左侧菜单显示名称 path就是路径 icon为显示的图标 （icon是uni-icons的 图标 文档http://vue3-hellouniapp.dcloud.net.cn/pages/extUI/icons/icons） 菜单最多支持三级，最后一级菜单无需设置icon

// menu.ts

export default [
	{
		name: '菜单',
		icon: 'bars',
		path: '/pages/menu', 
		children: [
			{
				name: '菜单一',
				path: '/pages/menu/menu1',
			},
			{
				name: '菜单二',
				path: '/pages/menu/menu2',
			}
		]
	}
];

8、src文件夹下 router文件夹index.ts 默认路由 可以把所有路由都写到这里，也可以按照如下写法，将routers文件夹下多个的路由引入

import menu from './routers/menu';
class Router {
	defaultRouter = [
		{
			name: '首页',
			path: '/pages/index/index',
			icon: 'home-filled',
			
		},
		...menu, // 这里是为了代码简洁，可以放在routers文件下 ，然后引入
		
	];

}

export default new Router();

9、src文件夹下 router文件夹router-guard.ts 全局路由守卫，拦截浏览器默认输入事件，阻止通过直接输入网站地址进入无权限的页面，无需修改

10、src文件夹下 static文件夹 图片存储文件夹

11、src文件夹下 uni_modules插件

二、开始使用

！！！很重要 登录页的写法

使用uniapp的生命周期

使用uniapp的路由跳转

// 第一种 不传参
uni.navigateTo({
	url: '/pages/error/error'
});
// 传参
uni.navigateTo({
	url: '/pages/error/error?id=xxx&type=xxxx'
});

// 传参
uni.navigateTo({
	url: '/pages/error/error?obj=' + JSON.stringify(obj)
});



注：为了方便简写和调用，可以直接传递一个url地址替代Object，它只能执行uni.navigateTo类型的地址，不支持跳转到Tabbar页面， 如果有参数需要携带，以对象形式写到方法的第二个参数中。

// 简写	 不传参
uni.$u.route('/pages/error/error')

// 传参
uni.$u.route('/pages/error/error',{
	id: 'xxxxx',
	type: 'xxxxx'
})
// 传参
uni.$u.route('/pages/error/error',obj) //无需 JSON.stringify(xxx)

#格式化时间 #timeFormat | date(timestamp, format = "yyyy-mm-dd")

该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。 time 任何合法的时间格式、秒或毫秒的时间戳 format 时间格式，可选。默认为yyyy-mm-dd，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： yyyy:mm:dd，yyyy-mm-dd，yyyy年mm月dd日，yyyy年mm月dd日 hh时MM分ss秒，yyyy/mm/dd/，MM:ss等组合

以集成uview的所有的js工具库 具体看uview官方文档 使用时 把this换成uni

节流防抖 对象深度克隆 对象深度合并 时间格式化 路由跳转 数组乱序 全局唯一标识符 对象转URL参数 规则校验 md5加密 随机数值 去除空格等

如有不懂请加qq 965969604