Skip to content

Commit c9b98c5

Browse files
haoxianruihaoxianrui
committed
完善文档
1 parent 1ff2edf commit c9b98c5

File tree

12 files changed

+467
-21
lines changed

12 files changed

+467
-21
lines changed

‎src/.vuepress/public/assets/image/alipay.jpg

-9.74 KB
Loading

‎src/support/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ category:
1212

1313
<img width="140" src="/assets/image/alipay.jpg">
1414

15-
## 付费支持
15+
## 付费服务
1616

1717
::: tip
1818

‎src/vue-uniapp-template/1.项目启动/README.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,15 @@ category:
1414
本文档介绍如何启动项目 [vue-uniapp-template](https://gitee.com/youlaiorg/vue-uniapp-template)。
1515
:::
1616

17-
## 环境准本
17+
## 环境准备
1818

1919
### 安装 Node
2020

2121
> `Node.js` 是运行 JavaScript 代码的环境，也是 `npm` 包管理器的依赖。
2222
23-
打开 [Node.js 官方下载页面](https://nodejs.org/zh-cn/download/prebuilt-installer)，根据你的操作系统选择合适的版本进行下载，**推荐安装 LTS 版本**，这是长期支持版本，适合开发环境，比如这里选择 `v20.18.0(LTS) ` 版本。
24-
25-
![](https://i-blog.csdnimg.cn/direct/50053bf23e6344098f6c09d839c8981f.png)
23+
打开 [Node.js 官方下载页面](https://nodejs.org/zh-cn/download/prebuilt-installer)，根据你的操作系统选择合适的版本进行下载，**推荐安装 LTS 版本**，这是长期支持版本，适合开发环境，比如这里选择 `v20.18.0(LTS)` 版本。
2624

25+
![](https://i-blog.csdnimg.cn/direct/50053bf23e6344098f6c09d839c8981f.png)
2726

2827
下载之后，双击安装包根据提示安装，通过以下命令检查是否成功安装：
2928

@@ -33,19 +32,22 @@ node -v
3332

3433
![](https://i-blog.csdnimg.cn/direct/c0a3901ca8274491b35ddd17c2db1d78.png)
3534

36-
37-
3835
### 安装 VSCode
3936

4037
>`VSCode` 是一款非常流行的代码编辑器，特别适合前端开发。
4138
42-
访问 [Visual Studio Code 官方网站](https://code.visualstudio.com/) ,根据你的操作系统下载相应版本的 `VSCode` ,下载完成后，双击安装程序并按照提示完成安装。
39+
访问 [Visual Studio Code 官方网站](https://code.visualstudio.com/)，根据你的操作系统下载相应版本的 `VSCode`，下载完成后，双击安装程序并按照提示完成安装。
4340

41+
## 启动项目
4442

43+
### 拉取代码
4544

46-
## 启动项目
45+
```bash
46+
git clone https://gitee.com/youlaiorg/vue-uniapp-template.git
47+
cd vue-uniapp-template
48+
```
4749

48-
### h5端
50+
### H5端
4951

5052
```bash
5153
# 安装依赖
@@ -57,12 +59,10 @@ pnpm run dev:h5
5759

5860
### 小程序端
5961

60-
6162
在 HBuilder X 中，点击 `运行`→`运行到小程序模拟器`→`微信开发者工具`。
6263

6364
![](https://www.youlai.tech/storage/blog/2025/02/24/df85a41c46bd41d18a67400867cdd50e.png)
6465

65-
6666
项目编译完成后，微信开发者工具会自动启动并呈现页面。
6767

6868
![](https://www.youlai.tech/storage/blog/2025/02/24/9c2ceb3651a446178a8b9fc6a34188b1.png)

‎src/vue-uniapp-template/2.项目配置/README.md

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: 项目配置
3+
icon: screwdriver-wrench
4+
dir:
5+
collapsible: false
6+
expanded: false
7+
order: 2
8+
link: true
9+
category:
10+
- 项目配置
11+
---
12+
13+
::: tip
14+
本文档介绍如何配置项目 [vue-uniapp-template](https://gitee.com/youlaiorg/vue-uniapp-template)，包括关闭自动类型声明、配置环境变量和设置 ESLint。
15+
:::
16+
17+
## 关闭自动类型声明
18+
19+
为了避免多人协同开发时重复生成类型声明文件，默认情况下自动类型声明功能是关闭的。如果需要开启，可以在 `vue.config.ts` 文件中将 `enabled` 设置为 `true`：
20+
21+
```ts {5} title="src/router/index.ts"
22+
AutoImport({
23+
imports: ["vue", "uni-app"],
24+
dts: "src/types/auto-imports.d.ts", // 自动生成的类型声明文件
25+
eslintrc: {
26+
enabled: true, // 开启自动类型声明
27+
},
28+
}),
29+
```
30+
31+
## 配置环境变量
32+
33+
在项目根目录下创建 `.env` 文件，并添加以下内容：
34+
35+
```plaintext
36+
VUE_APP_API_BASE_URL=https://api.example.com
37+
VUE_APP_TITLE=Vue Uniapp Template
38+
```
39+
40+
在代码中可以通过 `process.env.VUE_APP_API_BASE_URL` 和 `process.env.VUE_APP_TITLE` 访问这些变量。
41+
42+
## 设置 ESLint
43+
44+
ESLint 是一个用于识别和报告 JavaScript 代码中问题的工具。你可以按照以下步骤设置 ESLint：
45+
46+
1. 安装 ESLint 及其相关插件：
47+
48+
```bash
49+
pnpm add eslint eslint-plugin-vue @vue/eslint-config-typescript --save-dev
50+
```
51+
52+
2. 在项目根目录下创建 `.eslintrc.js` 文件，并添加以下内容：
53+
54+
```javascript
55+
module.exports = {
56+
root: true,
57+
env: {
58+
node: true,
59+
},
60+
extends: [
61+
'plugin:vue/vue3-essential',
62+
'@vue/typescript/recommended',
63+
],
64+
parserOptions: {
65+
ecmaVersion: 2020,
66+
},
67+
rules: {
68+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
69+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
70+
},
71+
};
72+
```
73+
74+
3. 在 `package.json` 中添加以下脚本：
75+
76+
```json
77+
"scripts": {
78+
"lint": "eslint --ext .js,.ts,.vue src"
79+
}
80+
```
81+
82+
运行 `pnpm run lint` 来检查代码中的问题。

‎src/vue-uniapp-template/3.组件文档/1.富文本.md

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: 富文本
3+
icon: list
4+
order: 1
5+
category:
6+
- 组件
7+
tag:
8+
- 富文本
9+
---
10+
11+
::: info 介绍
12+
本文介绍如何在 vue3-element-admin 项目中使用 WangEditor 富文本组件。目前，原版 [wangEditor](https://www.wangeditor.com/) 已停止更新，目前项目使用 [wangEditor-next](https://cycleccc.github.io/docs/) 代替。
13+
:::
14+
15+
16+
## 使用示例
17+
18+
```vue
19+
<template>
20+
<WangEditor v-model="value" height="600px" />
21+
</template>
22+
23+
<script setup lang="ts">
24+
// 导入组件, 默认无需导入，已全局注册
25+
import WangEditor from "@/components/WangEditor/index.vue";
26+
27+
const value = ref("初始化内容");
28+
</script>
29+
30+
```
31+
32+
![](https://www.youlai.tech/storage/blog/image-20250122115344619.png)
33+
34+
35+
36+
## 上传图片
37+
38+
富文本编辑器默认接入 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) 的文件上传接口。如需使用其他后端，请修改 `src/components/WangEditor/index.vue` 文件中的 `customUpload` 方法，调整为对应的上传逻辑。
39+
40+
41+
```typescript
42+
// 上传图片回调函数类型
43+
type InsertFnType = (url: string, alt: string, href: string) => void;
44+
45+
// 编辑器配置
46+
const editorConfig = ref<Partial<IEditorConfig>>({
47+
placeholder: "请输入内容...",
48+
MENU_CONF: {
49+
uploadImage: {
50+
customUpload(file: File, insertFn: InsertFnType) {
51+
// 上传图片，并将返回的图片地址通过 insertFn 插入到编辑器
52+
FileAPI.upload(file).then((res) => {
53+
insertFn(res.url, res.name, res.url);
54+
});
55+
},
56+
},
57+
},
58+
});
59+
```
60+
61+
::: tip
62+
- 如果使用 `youlai-boot` 后端，无需修改任何代码。
63+
- 如果对接其他后端，只需在 `customUpload` 方法中实现自定义的图片上传逻辑，并调用 `insertFn` 方法插入图片地址。
64+
:::
65+
66+
## 参数说明
67+
68+
| 名称 | 详情 | 类型 | 默认值 |
69+
| ------- | ------ | ----- | ------ |
70+
| v-model | 绑定值 | string | — |
71+
| height | 富文本高度 | string | 500px |
72+

‎src/vue-uniapp-template/3.组件文档/2.图片上传.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: 图片上传
3+
icon: list
4+
order: 2
5+
category:
6+
- 组件
7+
tag:
8+
- 图片
9+
---
10+
11+
::: info 介绍
12+
本文介绍如何在 `vue3-element-admin` 项目中使用图片上传组件。
13+
:::
14+
15+
16+
## 单图上传
17+
18+
19+
### 使用示例
20+
21+
```vue
22+
<template>
23+
<SingleImageUpload v-model="picUrl" />
24+
</template>
25+
26+
<script setup lang="ts">
27+
// 导入组件, 默认无需导入，已全局注册
28+
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
29+
// 图片路径
30+
const imageUrl = ref("https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg");
31+
</script>
32+
```
33+
34+
35+
36+
![](https://www.youlai.tech/storage/blog/2025/02/03/image-20250203213448372.png)
37+
38+
39+
40+
### 参数说明
41+
42+
以下是调整后的表格：
43+
44+
| 名称 | 详情 | 类型 | 默认值 |
45+
| --------------- | ------------------------------------------------------- | ------- | ------------------------------------------------- |
46+
| v-model | 图片路径 | String | "" |
47+
| maxFileSize | 最大文件大小（单位：M） | Number | 10 |
48+
| accept | 接收的文件格式，用于限制上传文件的类型。默认（image/*）支持所有，可自定义，如：'.png,.jpg,.gif' | String | image/* |
49+
| style | 自定义样式，用于设置组件的宽度和高度等其他样式 | Object | {} |
50+
| data | 请求携带的额外参数 | Object | {} |
51+
| name | 上传文件的参数名 | String | file |
52+
53+
|
54+
55+
56+
57+
## 多图上传
58+
59+
### 使用示例
60+
61+
```vue
62+
<template>
63+
<MultiImageUpload v-model="picUrls" />
64+
</template>
65+
66+
<script setup lang="ts">
67+
// 导入组件, 默认无需导入，已全局注册
68+
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
69+
// 图片路径集合
70+
const imageUrls = ref([
71+
"https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
72+
"https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
73+
]);
74+
</script>
75+
```
76+
77+
![](https://www.youlai.tech/storage/blog/2025/02/03/image-20250203213414546.png)
78+
79+
### 参数说明
80+
81+
| 名称 | 详情 | 类型 | 默认值 |
82+
| ----------- | ------------------------------------------------------- | ------ | ------- |
83+
| v-model | 图片路径集合 | Array | [] |
84+
| maxFileSize | 最大文件大小（单位：M） | Number | 10 |
85+
| accept | 接收的文件格式，用于限制上传文件的类型。默认（image/*）支持所有，可自定义，如：'.png,.jpg,.gif' | String | image/* |
86+
| limit | 文件上传数量限制 | Number | 10 |
87+
| style | 自定义样式，用于设置组件的宽度和高度等其他样式 | Object | {} |
88+
| data | 请求携带的额外参数 | Object | {} |
89+
| name | 上传文件的参数名 | String | file |
90+
91+

0 commit comments

Comments
 (0)