appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化README格式

master
绝弹 2023-09-12 09:12:09 +08:00 committed by GitHub
parent 3f72b304f5
commit 02dd664cde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@ -51,7 +51,7 @@ pnpm dev
### 路由菜单 ### 路由菜单
基于 [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 插件。本项目使用`src/pages`作为路由目录，最终生成的路由仅有 2 级，主要是出于`<keepalive>`缓存的需要，其中： 基于 [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) 插件。本项目使用 src/pages 作为路由目录，最终生成的路由仅有 2 级，主要是出于`<keepalive>`缓存的需要，其中：
| 说明 | | 说明 |
| ----------------------------------------------------------------- | | ----------------------------------------------------------------- |
@ -72,17 +72,17 @@ pnpm dev
### 文件后缀 ### 文件后缀
在 `scripts/vite/plugin.ts` 文件中，内置了一个 VITE 插件，主要用于输出编译信息以及根据不同文件后缀进行打包。在项目根目录下的`.env`配置文件中，可指定以下属性： 在 scripts/vite/plugin.ts 文件中，内置有一个 VITE 插件，主要用于输出编译信息以及根据不同文件后缀进行打包。在项目根目录下的 .env 配置文件中，可指定以下属性：
``` ```
VITE_EXTENSION = my VITE_EXTENSION = my
``` ```
配置后，构建时将首先尝试加载`index.my.vue`文件，不存在时回退至`index.vue`。默认开发环境下为`dev`, 其他环境为`prod`，这在本地临时开发或根据微差异化打包时非常有用。 配置后，构建时将首先尝试加载 index.my.vue 文件，不存在时回退至 index.vue 文件。默认开发环境下为 dev, 其他环境为 prod，这在本地临时开发或根据微差异化打包时非常有用。
### 图标样式 ### 图标样式
基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装`icon-park-outline`图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例： 基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装icon-park-outline 图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例：
```html ```html
<i class="text-sm icon-park-outline-home" /> <i class="text-sm icon-park-outline-home" />
@ -90,11 +90,15 @@ VITE_EXTENSION = my
### 接口请求 ### 接口请求
基于 [typescript-swagger-api]() 库，根据 openapi 结构自动生成请求接口和数据类型。生成的内容位于`src/api/service`目录下，默认包含数据类型定义、请求客户端(默认 axios)和请求基类三大块内容。如需自定义生成模板，可查阅`scripts/openapi`目录下的模板内容。 基于 [typescript-swagger-api]() 库，根据 openapi 结构自动生成请求接口和数据类型。生成的内容位于 src/api/service 目录下，包含以下内容:
生成的接口类型包含完整的入参和出参类型提示。 - 请求数据类型(typescript)
- 请求客户端(axios/fetch, 默认 axios)
- 请求基类(对象)。
此外，在`src/api/instance/useRequest.ts`中还定义了一个`useRequest`函数，可对请求状态进行管理，示例： 如需自定义生成模板，可查阅 scripts/openapi 目录下的模板内容。生成的接口类型包含完整的入参和出参类型提示。
此外，在 src/api/instance/useRequest.ts 文件中还定义了一个 useRequest 函数，可对请求状态进行管理，示例：
```typescript ```typescript
const state = useRequest(api.user.getUsers); const state = useRequest(api.user.getUsers);
@ -132,19 +136,16 @@ const media = defineConstants([
}, },
]); ]);
// enumKey
media.IMAGE; // 2
// 根据value值，获取其他属性值, 第2个参数可选(默认label) // 根据value值，获取其他属性值, 第2个参数可选(默认label)
media.fmt(1, "color"); // red media.fmt(1); // 视频
// 获取某个属性值组成的数组 // 获取某个属性值组成的数组，默认value
media.val("value"); // [1, 2] media.val(); // [1, 2]
``` ```
### 增删改查 ### 增删改查
在`src/components`目录中，封装了`form`组件和`table`组件，主要用于 CRUD 的简单操作，这里演示基本的使用方法。 在 src/components 目录中，封装有 form 组件和 table 组件，主要用于 CRUD 的常规操作，这里演示基本的使用方法。
```html ```html
<template> <template>
@ -218,7 +219,7 @@ media.val("value"); // [1, 2]
### 自动导入 ### 自动导入
基于 [unplugin-auto-import]() 和 [unplugin-vue-components]() 插件，主要用于常用 API 的自动导入，例如 vue 和 vue-router 等；以及常用组件的导入，例如 arco-design 等。示例： 基于 [unplugin-auto-import]() 和 [unplugin-vue-components]() 插件，主要用于 vue 等常用 API 的自动导入；以及 arco-design 等常用组件的导入，示例如下：
```html ```html
<template> <template>
@ -236,7 +237,7 @@ media.val("value"); // [1, 2]
### 代码片段 ### 代码片段
基于 VsCode 的 snippet 功能，在`.vscode/components.code-snippets`文件中定义了常用组件和 API 模板的快捷生成。所有代码片段均以`g`(generate)开头，对于快速 CRUD 或新建页面等非常有用，示例： 基于 VsCode 的 snippet 功能，在 .vscode/components.code-snippets 文件中定义有常用组件和 API 的模板。所有代码片段均以 g(generate) 开头，对于快速 CRUD 或新建页面等非常有用，示例：
1. 在文件内，如输入如下内容并回车： 1. 在文件内，如输入如下内容并回车：
@ -260,9 +261,9 @@ groutemeta
### 版本记录 ### 版本记录
基于 [release-it]() 库，运行`pnpm release`命令时，将根据你的选择执行各种操作，如需自定义`CHANGELOG.md`的生成模板或进行其他自定义配置，请查阅`/scripts/release`目录下的内容。包含功能如下： 基于 [release-it]() 库，运行 pnpm release 命令时，将根据你的选择执行各种操作，如需自定义 CHANGELOG.md 的生成模板或进行其他自定义配置，请查阅 /scripts/release 目录下的内容。包含功能如下：
- 提升 package.json 的 version 版本 - 提升 package.json 的 version 字段
- 给 git 打版本标签，例如 v1.0.1 - 给 git 打版本标签，例如 v1.0.1
- 根据符合 [Conventional Changelog]() 规范的 git 提交信息，在`CHANGELOG.md`文件中生成版本记录。 - 根据符合 [Conventional Changelog]() 规范的 git 提交信息，在`CHANGELOG.md`文件中生成版本记录。
- 自动推送到 npm/github/gitlab 中 - 自动推送到 npm/github/gitlab 中
@ -275,7 +276,7 @@ groutemeta
日常开发难免用到各种工具库，但直接使用的话难免有不符合项目需求的时候。例如 dayjs 的本地化语言、相对时间插件等都要配置，散落在项目的各个角落并不是个好习惯。 日常开发难免用到各种工具库，但直接使用的话难免有不符合项目需求的时候。例如 dayjs 的本地化语言、相对时间插件等都要配置，散落在项目的各个角落并不是个好习惯。
建议在`src/plugins`进行二次封装后，再在项目中使用，不仅统一调用还便于管理，方便后续的优化升级。本项目内置开发中常用的类库，如下： 建议在 src/libs 进行二次封装后，再在项目中使用，不仅统一调用还便于管理，方便后续的优化升级。本项目内置开发中常用的类库，如下：
| 库 | 说明 | | 库 | 说明 |
| ---------------- | ------------------------------------------------------------- | | ---------------- | ------------------------------------------------------------- |