0.0.3 • Published 2 years ago
power--style v0.0.3
power--style
使用示例:
// 浏览器样式初始化
@import 'power--style/dist/reset/style.css';
// 产品样式初始化
@import 'power--style/dist/styles/index.scss';
// 主题相关的变量、基础色值都写在 themes 目录里的文件中,可以覆盖原有的变量来改变样式
@import './themes/blue.scss';
@import './themes/white.scss';
// 产品线自己的变量写在 ./global.scss
@import './common/variables.scss';
// 产品线自己的样式写在 ./global.scss
@import './global.scss';
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
...