Skip to content

Commit

Permalink
docs: 更新文档
Browse files Browse the repository at this point in the history
  • Loading branch information
ckl1 committed Jan 3, 2024
1 parent 846677e commit 73ce01c
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 62 deletions.
4 changes: 0 additions & 4 deletions .vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,6 @@ function createSidebar() {
text: 'Error 缺省组件',
link: '/components/error',
},
{
text: 'Sticky 黏性组件',
link: '/components/sticky',
},
{
text: 'ContentDetailWrap 详情包裹组件',
link: '/components/content-detail-wrap',
Expand Down
6 changes: 5 additions & 1 deletion components/descriptions.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# Descriptions 描述组件

`element-plus``Descriptions` 组件进行封装。
::: warning 注意
从 v2.5.3之后,Descriptions 组件不再基于 `element-plus``Descriptions` 进行二次封装,所以可能有的属性无法使用,具体可以自行修改或者改造,或者可以提issue。
:::

~~`element-plus``Descriptions` 组件进行封装。~~

Descriptions 组件位于 [src/components/Descriptions](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Descriptions)

Expand Down
10 changes: 9 additions & 1 deletion guide/fqa.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,12 @@

项目中大部分使用了 `tsx` ,所以原先 `template` 的一些代码规范就不适用了,如 `v-if` 得使用 `{判断条件 ? 成立 : 不成立}` 来进行显示隐藏,可以查阅下相关文档。

并且请确保如果要使用 `tsx` 语法, `script` 是否声明了 `lang="tsx"`
并且请确保如果要使用 `tsx` 语法, `script` 是否声明了 `lang="tsx"`

## 添加路由之后,页面无法展示

如果是在项目中直接添加静态路由,需要确保 appStore 中的 `dynamicRouter``serverDynamicRouter``false`,并且手动清除下浏览器的 `localStorage`

## 添加新的 vue 文件后,编辑器类型报错

这是 `Volar` 插件的问题,一般重启下编辑器即可生效。
62 changes: 6 additions & 56 deletions guide/mock.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,7 @@ server: {
},
```

之后在 [src/config/axios/config.ts](https://github.com/kailong321200875/vue-element-plus-admin/blob/master/src/config/axios/config.ts) 中更改 `base_url.base` 为你所配置的代理即可。

```ts
const config: {
base_url: {
base: string
dev: string
pro: string
test: string
}
result_code: number | string
default_headers: AxiosHeaders
request_timeout: number
} = {
/**
* api请求基础路径
*/
base_url: {
// 开发环境接口前缀
base: '/api',

// 打包开发环境接口前缀
dev: '',

// 打包生产环境接口前缀
pro: '',

// 打包测试环境接口前缀
test: ''
},

/**
* 接口成功返回状态码
*/
result_code: '0000',

/**
* 接口请求超时时间
*/
request_timeout: 60000,

/**
* 默认接口请求类型
* 可选值:application/x-www-form-urlencoded multipart/form-data
*/
default_headers: 'application/json'
}

export { config }

```
配置接口前缀,可以在对应的 `env` 文件中,修改 `VITE_API_BASE_PATH` 的值

::: tip 注意

Expand All @@ -100,7 +50,7 @@ export { config }
:::

```ts
import request from '@/config/axios'
import request from '@/axios'
import type { TableData } from './types'

export const getTableListApi = (params: any) => {
Expand Down Expand Up @@ -160,7 +110,7 @@ export const REQUEST_TIMEOUT = 60000

Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发进程所阻塞。

本项目使用 [vite-plugin-mock-dev-server](https://vite-plugin-mock-dev-server.netlify.app/) 来进行 mock 数据处理。**项目内 mock 服务分本地和线上**
本项目使用 [vite-mock-plugin](https://github.com/vbenjs/vite-plugin-mock) 来进行 mock 数据处理。**项目内 mock 服务分本地和线上**

### 本地 Mock

Expand All @@ -180,17 +130,17 @@ Mock 数据是前端开发过程中必不可少的一环,是分离前后端开

::: tip

mock 的值可以直接使用 [fakerjs](https://github.com/faker-js/faker#readme) 的语法。
mock 的值可以直接使用 [mock.js](http://mockjs.com/) 的语法。

:::

#### 接口有了,如何去掉 mock

可以在vite.config.ts中删除 `MockDevServerPlugin` 对应的代码。
可以在对应的 `env` 文件中设置 `VITE_USE_MOCK``false` ,如果想要更彻底一点,可以在vite.config.ts中删除 `viteMockServe` 对应的代码。


### 线上 mock

由于该项目是一个展示类项目,线上也是用 mock 数据,所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。

项目线上 mock 采用的是 [fakerjs](https://github.com/faker-js/faker#readme) 进行 mock 数据模拟。
项目线上 mock 采用的是 [mock.js](http://mockjs.com/) 进行 mock 数据模拟。

0 comments on commit 73ce01c

Please sign in to comment.