vue3 + vite + pinia + typescript + axios + echarts + sass + vue-router + element-plus

vue-types + lodash-es + mitt + dayjs + qs + sortablejs + moment + @vue/runtime-core

简介

基于 vite2 和 Vue 基础框架添加了以下功能：

• 提交代码前检查并修复使用 eslint+stylelint+postcss+prettier+husky 对前端项目代码进行规范
• typescript 集成
• 使用 sanitize.css 进行样式初始化
• 使用 sass 编写样式
• 切换主题功能，提取并整理了所有的设计变量，并通过 CSS Vars 技术实现动态更新主题。
• 集成 element-plus 并使用相关组件，适配切换主题功能，左侧菜单可以看出效果
• 左侧菜单封装，根据后端返回数据权限结合本地所有路由动态生成左侧菜单,菜单图标根据数据动态加载
• vue-router 路由功能添加，包含静态路由、动态路由、带有左侧菜单布局路由、不带布局路由、需要有权限才可以访问的私有路由、公共路由、错误提示页等基础路由
• axios 封装，并添加接口调用示例，登录（post）、获取用户信息（get）
• 集成 pinia 并添加使用示例，响应式数据使用，从接口获取数据更新页面、用户(user)
• nprogress 路由跳转时进度条动画添加
• 图片使用示例，svg、自定义 svg、gif、png 等的使用，png 作为背景图使用，不管宽高如何变化，边角位置不变形，参考全局样式：img-card-bg

svg 优先使用element-plus的图标，其次是Iconify,再次是自定义svg,需要根据数据动态生成的图标，需要先在文件 src/plugins/customComponents.ts 里 注册自定义组件然后才可以使用

• 使用 pinia 状态管理器，取代 vuex

这个样板使用 Vue 3 <script setup> SFCs, 了解更多 script setup docs

注意事项

• 切换主题方法

  参考 src/views/aa-demo/sass/index.vue

• 主题样式相关的基础色值写在 src/assets/styles/themes 目录内的文件中

• 基础色值写在 src/assets/styles/base/base-color.module.scss 文件中，其他文件尽量不直接写色值，可以通过 export 导出色值供 js 使用

• 全局样式写在 src/assets/styles/global.scss 文件中，局部样式写在 .vue 文件中

• 常用工具方法写在 src/utils/*.ts 文件中

目前已有的方法：
setDocumentTheme // 设置文档主题

• env 相关的环境变量通过以下方式获取

  const VITE_APP_BASE_API = import.meta.env.VITE_APP_BASE_API

参考：https://blog.csdn.net/weixin_35958891/article/details/124745598

• 接口调用相关示例请搜索以下内容查看相关文件

src/store/modules/user.ts

import { login } from '@/api/login';
import { getInfo } from '@/api/account';
		/** 登录 */
		async login(params: API.LoginParams) {
			try {
				const { data } = await login(params);
        this.setToken(data.token);
        return await this.afterLogin();
			} catch (error) {
        console.log('error', error);
				return Promise.reject(error);
			}
		},
		/** 登录成功之后, 获取用户信息以及生成权限路由 */
		async afterLogin() {
			try {
				const [userInfo] = await Promise.all([getInfo()]);
				this.name = userInfo.name;
				this.avatar = userInfo.headImg;
				this.userInfo = userInfo;
				return { userInfo };
			} catch (error) {
        console.log('error', error);
				return Promise.reject(error);
			}
		},

get: src/api/account/index.ts

import type { BaseResponse } from '@/utils/request';
import { request } from '@/utils/request';
export function getInfo(
	params = {
		_t: new Date().getTime(),
	},
) {
	return request<API.AdminUserInfo>(
		{
			url: 'account/info',
			method: 'get',
			params,
		},
		{
			isMock: true,
		},
	);
}

src/api/account/model.d.ts

declare namespace API {
	type AdminUserInfo = {
		createTime: Date;
		updateTime: Date;
		id: number;
		departmentId: number;
		name: string;
		username: string;
		password: string;
		psalt: string;
		nickName: string;
		headImg: string;
		loginIp: string;
		email: string;
		phone: string;
		remark: string;
		status: number;
		roles: number[];
		departmentName: string;
	};
}

post: src/api/login/index.ts

import type { BaseResponse } from '@/utils/request';
import { request } from '@/utils/request';

/**
 * @description 登录
 * @param {LoginParams} data
 * @returns
 */
export function login(data: API.LoginParams) {
	return request<BaseResponse<API.LoginResult>>(
		{
			url: 'login',
			method: 'post',
			data,
		},
		{
			isMock: true,
			isGetDataDirectly: false,
		},
	);
}

src/api/login/model.d.ts

declare namespace API {
	/** 登录参数 */
	type LoginParams = {
		password: string;
		username: string;
	};

	/** 登录成功结果 */
	type LoginResult = {
		token: string;
	};
}

统一入口： src/utils/request.ts

...