BYT UNI

项目技术栈

vue3 + vite + pinia + ts + unocss + eslint + prettier

主题色使用与配置

在src目录下的theme 文件夹下配置themeVars文件实现颜色配置与组件库主题配置组件库主题配置详情

/**
 * 组件库与主题色配置
 */

export const themeConfig: ThemeConfig = {
  primary: '#e27e85', // 主题色  -- 对应组件库的colorTheme 不需要重复设置colorTheme
  colorWhite: 'rgb(255, 255, 255)', // 用于mix的白色
  colorBlack: 'rgb(0, 0, 0)', // 用于mix的黑色
  success: '#34d19d', // 成功色  --对应组件库的 colorSuccess 不需要重复设置
  warning: '#f0883a', // 警告色  --对应组件库的 colorWarning 不需要重复设置
  danger: '#fa4350', // 危险出错色 --对应组件库的 colorDanger 不需要重复设置
  purple: '#8268de', // 紫色 --对应组件库的 colorPurple 不需要重复设置
  secondary: '#8268de',
  yellow: '#f0cd1d', // 黄色 --对应组件库的 colorYellow 不需要重复设置
  blue: '#2bb3ed', // 蓝色 --对应组件库的colorBlue 不需要重复设置
  info: '#909399' // 信息色 --对应组件库的 colorInfo 不需要重复设置
};

暗色和亮色切换的配置

需要设置两组对应的暗色亮色的颜色来实现暗色亮切换

themeVars文件
//暗色 亮色对应的颜色 注意两组颜色需要一一对应
const darker = ['#333333'];
const lighter = ['#ffffff'];

主题使用

作为className 使用结合了unocss 可以直接使用配置颜色

  <view class="bg-themeLight color-themeDark"></view>
  <view class="color-primary">字体颜色</view>

在css 中使用可以直接使用css 变量

     <style lang="scss">
   .cssColor {
     color: var(--byt-color-primary);
   }
   </style>
     //这是项目中配置的部分主题色
   primary: 'var(--byt-color-primary)',
   success: 'var(--byt-color-success)',
   warning: 'var(--byt-color-warning)',
   danger: 'var(--byt-color-danger)',
   purple: 'var(--byt-color-purple)',
   yellow: 'var(--byt-color-yellow)',
   blue: 'var(--byt-color-blue)',
   info: 'var(--byt-color-info)'

使用scss变量使用主题色
$u-primary: var(--byt-color-primary, #007aff);
$u-secondary: var(--byt-color-secondary, #9a6ae3);
$u-success: var(--byt-color-success, #4cd964);
$u-warning: var(--byt-color-warning, #f0ad4e);
$u-error: var(--byt-color-error, #dd524d);
$u-purple: var(--byt-color-purple, #9a6ae3);
$u-yellow: var(--byt-color-yellow, #f0b42c);
$u-blue: var(--byt-color-blue, #007aff);
$u-info: var(--byt-color-info, #97a8be);

暗色调亮色调 scss 使用
$u-themeLight: var(--byt-themeLight-1, rgba(255, 255, 255, 1));
$u-themeLight-1: var(--byt-themeLight-2, rgba(255, 255, 255, 0.85));
$u-themeLight-2: var(--byt-themeLight-3, rgba(255, 255, 255, 0.65));
$u-themeLight-3: var(--byt-themeLight-4, rgba(255, 255, 255, 0.45));
$u-themeLight-4: var(--byt-themeLight-5, rgba(255, 255, 255, 0.25));
$u-themeLight-5: var(--byt-themeLight-6, rgba(255, 255, 255, 0.15));
$u-themeLight-6: var(--byt-themeLight-7, rgba(255, 255, 255, 0.09));
$u-themeLight-7: var(--byt-themeLight-8, rgba(255, 255, 255, 0.04));
$u-themeLight-8: var(--byt-themeLight-9, rgba(255, 255, 255, 0.02));

$u-themeDark: var(--byt-themeDark-1, rgba(0, 0, 0, 1));
$u-themeDark-1: var(--byt-themeDark-2, rgba(0, 0, 0, 0.85));
$u-themeDark-2: var(--byt-themeDark-3, rgba(0, 0, 0, 0.65));
$u-themeDark-3: var(--byt-themeDark-4, rgba(0, 0, 0, 0.45));
$u-themeDark-4: var(--byt-themeDark-5, rgba(0, 0, 0, 0.25));
$u-themeDark-5: var(--byt-themeDark-6, rgba(0, 0, 0, 0.15));
$u-themeDark-6: var(--byt-themeDark-7, rgba(0, 0, 0, 0.09));
$u-themeDark-7: var(--byt-themeDark-8, rgba(0, 0, 0, 0.04));
$u-themeDark-8: var(--byt-themeDark-9, rgba(0, 0, 0, 0.02));

无需跟随 暗色亮色切换的 使用$u-white 和$u-black
$u-white: var(--byt-white-1, rgba(255, 255, 255, 1));
$u-white-1: var(--byt-white-2, rgba(255, 255, 255, 0.85));
$u-white-2: var(--byt-white-3, rgba(255, 255, 255, 0.65));
$u-white-3: var(--byt-white-4, rgba(255, 255, 255, 0.45));
$u-white-4: var(--byt-white-5, rgba(255, 255, 255, 0.25));
$u-white-5: var(--byt-white-6, rgba(255, 255, 255, 0.15));
$u-white-6: var(--byt-white-7, rgba(255, 255, 255, 0.09));
$u-white-7: var(--byt-white-8, rgba(255, 255, 255, 0.04));
$u-white-8: var(--byt-white-9, rgba(255, 255, 255, 0.02));

$u-black: var(--byt-black-1, rgba(0, 0, 0, 1));
$u-black-1: var(--byt-black-2, rgba(0, 0, 0, 0.85));
$u-black-2: var(--byt-black-3, rgba(0, 0, 0, 0.65));
$u-black-3: var(--byt-black-4, rgba(0, 0, 0, 0.45));
$u-black-4: var(--byt-black-5, rgba(0, 0, 0, 0.25));
$u-black-5: var(--byt-black-6, rgba(0, 0, 0, 0.15));
$u-black-6: var(--byt-black-7, rgba(0, 0, 0, 0.09));
$u-black-7: var(--byt-black-8, rgba(0, 0, 0, 0.04));
$u-black-8: var(--byt-black-9, rgba(0, 0, 0, 0.02));

在js中使用


<view :style={color:themeVars.colorTheme}>主题颜色<view>
import { useTheme } from '@/hooks';
const {themeVars} = useTheme()

暗色亮色使用

需要再切换暗色和亮色时切换的颜色

结合unocss使用方式颜色更具配置的darker和lighter显示;


<view class="bg-themeLight color-themeDark"></view>
<view class="bg-themeLight-1 color-themeDark-1"></view>

2.在css中使用


.cssColor {
color: var(--byt-light-1);
}

mock 的实现方式

采用的是mockjs + nodejs 搭建服务器的形式实现mock数据, 使用node服务式为了减少代码的入侵;

使用mock方式:

使用 pnpm dev:mock 启动mock 服务

在env.config 设置


//是否全局需要mock
const needMock = false;
//是否需要局部mock - 开启局部mock 则会将请求中config.custom.mock 设置为true 的baseUrl设置为 mockUrl
export const moduleMock = true;

//mock 请求地址 启动的node服务地址
export const mockUrl = 'http://localhost:3000';

模拟数据

采用 mockjs 模拟数据,在mock 文件夹下的api 文件夹创建mock数据


// mock/api/login.js 文件
const Mock = require('mockjs');

function login(req, res) {
const { username, password } = req.body;

// 模拟登录逻辑
if (username === 'admin' && password === '123456') {
const data = Mock.mock({
code: 200,
message: '登录成功',
token: '@guid', // 生成一个随机的 token
data: {
id: '@id',
name: '@cname',
email: '@email',
avatar: '@image("100x100")'
}
});
res.json(data);
} else {
res.status(401).json({
code: 401,
message: '用户名或密码错误'
});
}
}

module.exports = login;

//在mock/index.js 文件引入

// index.js
const express = require('express');

const bodyParser = require('body-parser');
const login = require('./api/login');
const app = express();
const port = 3000;
app.use(bodyParser.json());
// 允许跨域请求
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '\*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});

// 模拟登录接口
app.post('/api/login', login);

app.listen(port, () => {
console.log(`Mock server is running at http://localhost:${port}`);
});

项目目录结构

project-root/ ├── mock/ # mock ├── src/ # 目录 │ ├── components/ # │ │── layouts/ # 页面布局 │ ├── pages/ # tabBar页面 │ ├── utils/ # 工具函数 │ ├── services/ # API服务 │ │ └── api/ # api接口 │ │ └── request # service实例 │ │ └── index.ts # service导出文件 │ ├── static/ # 静态资源 │ │ ├── tabBar/ # tabBar图片资源 │ │ ├── images/ # 图片资源 │ │ ├── svg/ # svg资源 │ │ └── styles/ # 样式文件 │ ├── store/ # pinia 状态管理 │ ├── theme/ # 主题色相关配置 │ ├── types/ # ts类型导出 │ └── App.vue │ └── main.ts # 应用入口 │ └── manifest.json 应用配置文件 │ └── pages.json 页面配置文件 - 无需手动修改通过pages.config.ts 文件生成 │ └── uni.scss 全局scss 变量 │ ├── package.json # 项目依赖配置 ├── pages.config.ts # 项目依赖配置 - 利用uni-page 插件自动生成pages 无需手动修改pages.json配置文件 ├── tsconfig.json # TypeScript配置 ├── eslint.config.mjs # eslint配置 ├── .eslintrc-auto-import.json # 自动导入防止eslint报错 ├── prettier.config.mjs # prettier格式化配置 ├── stylelint.config.mjs # stylelint 配置文件 - 检测css格式 ├── .release-it.json # release-it 插件配置版本更新自动化发布npm ├── commitlint.config.cjs # git 提交检测配置 ├── .env # 环境变量 ├── uno.config.js # unocss 配置文件实现 color-primary 取用 theme 文件夹下定义的主题色 ├── .gitignore # Git忽略文件 └── README.md # 项目说明文档

layout 页面布局

基于 vite-plugin-uni-layouts 实现

src/layouts 文件夹下的 vue 文件都会自动生成一个布局，默认的布局文件名为 default ，路径 src/layouts/default.vue 。

如果需要修改使用的布局，可以通过 vue 文件内 route 代码块指定需要的布局，如下示例使用 demo 布局。


<route lang="json5">
{
layout: 'demo',
style: {
navigationBarTitleText: '关于',
},
}
</route>

项目规范

命名规范

页面命名规范
页面级别组件采取小驼峰命名 src/ ├── pages/ │ ├── products/ │ │ ├── index.vue # 产品列表页 │ │ ├── detail.vue # 产品详情页
组件命名规范
组件采取大驼峰命名 src/ ├── components/ │ ├── MyButton/ │ │ ├── index.vue # 组件 │ │ ├── type.ts # 组件的ts类型

Git 提交规范

提交信息必须符合以下规则：

必须包含类型（type）
必须包含主题（subject）
提交信息最大长度不超过 108 个字符
Emoji 图标位于左侧

提交类型说明

类型	Emoji	说明	示例
init	🎉	初始化项目	`🎉 init: 项目初始化`
feat	✨	新增功能	`✨ feat: 添加用户登录功能`
fix	🐞	修复bug	`🐞 fix: 修复登录验证失败问题`
docs	📃	文档变更	`📃 docs: 更新 README 文档`
style	🌈	代码格式（不改变代码逻辑）	`🌈 style: 调整代码缩进格式`
refactor	🦄	代码重构	`🦄 refactor: 重构用户认证模块`
perf	🎈	性能优化	`🎈 perf: 优化列表加载性能`
test	🧪	测试相关	`🧪 test: 添加登录模块测试`
build	🔧	构建流程、依赖更改	`🔧 build: 升级依赖版本`
ci	🐎	CI 配置变更	`🐎 ci: 修改 Docker 配置`
chore	🐳	构建过程或工具变更	`🐳 chore: 更新 git hooks`
wip	🔓️	开发中的提交	`🔓️ wip: 用户管理功能开发中`
workflow	⏳️	工作流改进	`⏳️ workflow: 优化开发流程`
types	🚙	类型定义修改	`🚙 types: 更新接口类型定义`
versions	🔖	版本相关变更	`🔖 versions: 发布 v1.0.0 版本`
revert	↩	回滚提交	`↩ revert: 回滚到上一版本`

提交规则

类型：必须是上述类型之一
主题：
- 必须填写
- 简短精炼
- 清晰描述本次变更

使用方式

交互式提交（推荐）：

pnpm cz

直接提交：

git commit -m "🎉 init: 初始化项目"

注意事项

不允许空的提交类型
不允许空的提交主题
不允许空的 issue 前缀
不允许自定义 issue 前缀
提交时会自动跳过 scope、body、breaking、footer 相关问题

提交示例

🎉 init: 初始化项目基础架构
✨ feat: 新增用户登录功能
🐞 fix: 修复表单验证失败
📃 docs: 更新项目文档

bsin-app-scaffold

介绍

bsin-paas 平台的app 开发脚手架

软件架构

软件架构说明1

安装教程

xxxx
xxxx
xxxx

使用说明

xxxx
xxxx
xxxx

参与贡献

Fork 本仓库
新建 Feat_xxx 分支
提交代码
新建 Pull Request

特技

使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
Gitee 官方博客 blog.gitee.com
你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
Gitee 官方提供的使用手册 https://gitee.com/help
Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/

create-byt-uni

BYT UNI

项目技术栈

主题色使用与配置

暗色和亮色切换的配置

主题使用

暗色亮色使用

mock 的实现方式

使用mock方式:

模拟数据

项目目录结构

layout 页面布局

基于 vite-plugin-uni-layouts 实现

项目规范

命名规范

Git 提交规范

提交类型说明

提交规则

使用方式

注意事项

提交示例

bsin-app-scaffold

介绍

软件架构

安装教程

使用说明

参与贡献

特技

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

create-byt-uni

BYT UNI

项目技术栈

主题色使用与配置

暗色和亮色 切换的配置

主题使用

暗色亮色使用

mock 的实现方式

使用mock方式:

模拟数据

项目目录结构

layout 页面布局

基于 vite-plugin-uni-layouts 实现

项目规范

命名规范

Git 提交规范

提交类型说明

提交规则

使用方式

注意事项

提交示例

bsin-app-scaffold

介绍

软件架构

安装教程

使用说明

参与贡献

特技

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

暗色和亮色切换的配置

Weekly Downloads