Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] docs(ESLint): 优化文档并新增ESLint相关 #35

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

[WIP] docs(ESLint): 优化文档并新增ESLint相关 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
892e8fc
docs: 修正部分用词&应用规范
timi137137 Mar 17, 2025
f013005
docs: 修正部分用词&新增0.13版本ESLint规则提醒
timi137137 Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ touch docs/get-started.md

### 将你的文档添加到菜单栏

打开 `site/config.js` 文件，修改 export 的对象即可。比如，
打开 `site.config.js` 文件，修改 export 的对象即可。比如，

```js
module.exports = {
Expand Down
10 changes: 6 additions & 4 deletions docs/vue-next/develop-rules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 开发规范
spline: explain
---

为了维护项目的代码质量，项目中内置了格式化代码的工具 `Prettier` 和代码检测质量检查工具 `ESlint`。
为了维护项目的代码质量，项目中内置了格式化代码的工具 `Prettier` 和代码检测质量检查工具 `ESLint`。

同时，也推荐您在开发过程中遵循提交规范，以保持项目仓库的分支、提交信息的清晰整洁。

Expand All @@ -15,14 +15,16 @@ spline: explain

在脚手架搭建好的项目中，已经内置了符合 TDesign 开发规范的 `.prettierrc.js` 文件。您只需要安装 `Prettier` 插件，即可使用代码自动格式化的功能。

#### [ESlint](https://eslint.org/)
#### [ESLint](https://eslint.org/)

`ESlint`可以用来检查代码质量和风格问题。
`ESLint`可以用来检查代码质量和风格问题。

在脚手架搭建好的项目中，也已经内置了 `.eslintrc` 文件。您可以通过下面命令来进行代码检查和自动修复。

执行以下指令，会进行问题的检查及修复，在 pre-commit 的 git hook 中，项目也内置了检查指令，帮助您在提交代码前发现问题。

**tips: 在 0.13+ 开始, 项目中的相关配置文件已变更为 `eslint.config.js` 内置的规则写法也变更为扁平化配置法，详情请看 [新的默认配置格式](https://eslint.org.cn/docs/latest/use/migrate-to-9.0.0#flat-config)**

```bash
# 代码检查
npm run lint
Expand Down Expand Up @@ -69,4 +71,4 @@ npm run lint:fix

同时，当项目是协同开发时，推荐在项目中或者在持续集成的过程中，配置 [commit-lint](https://github.com/conventional-changelog/commitlint) 做 commit message 的检查，以约束协同开发者的 commit 遵守规范。

**tips:如果不熟悉 Conventional Commits 的规范，可以使用 [commitizen](https://github.com/commitizen/cz-cli) 小工具来辅助生成 commit message。**
**tips: 如果不熟悉 Conventional Commits 的规范，可以使用 [commitizen](https://github.com/commitizen/cz-cli) 小工具来辅助生成 commit message。**
48 changes: 28 additions & 20 deletions docs/vue-next/develop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,22 @@ spline: explain
```bash
.
├── README.md # 说明文档
├── index.html # 主 html 文件
├── index.html # 主入口文件 (HTML)
├── docs
├── mock # mock 目录
├── mock # Mock 目录
│ └── index.ts
├── package.json
├── package-lock.json
├── node_modules # 项目依赖
├── node_modules # 项目相关依赖
├── public
│ └── favicon.ico
├── src # 页面代码
├── .env # 生产环境变量
├── .env.development # 开发环境变量
├── commitlint.config.js # commintlint 规范
├── tsconfig.json # typescript 配置文件
└── vite.config.js # vite 配置文件
├── commitlint.config.js # Commintlint 规范
├── eslint.config.js # ESLint 规范
├── tsconfig.json # TypeScript 配置文件
└── vite.config.js # Vite 配置文件
```

### 页面代码结构
Expand Down Expand Up @@ -82,7 +83,7 @@ src
│ ├── font-family.less # 字体文件（腾讯体W7）
│ ├── layout.less # 全局样式布局
│ ├── reset.less # 对默认样式的重置
│ └── variables.less # 模板样式 token
│ └── variables.less # 模板样式 Token
├── types # 类型文件目录
└── utils # 工具层
│ ├── route # 路由工具封装
Expand All @@ -97,7 +98,7 @@ src
### 环境变量

在项目的根目录，有 `.env` 配置文件，项目会根据启动的命令中的 `mode` 参数，加载指定的配置文件的配置来运行，
如本地环境执行 `npm run dev`，因为对于命令中的`mode` 参数为`development`，项目运行会加载`.env.development`的配置来运行。
如本地环境执行 `npm run dev`，因为对于命令中的 `mode` 参数为 `development`，项目运行会加载 `.env.development` 的配置来运行。
项目初始化内置了 `.env.development`、`.env.test` 和 `.env` 分别对应本地开发环境、测试环境 和 生产（正式）环境，也可以根据实际需求继续扩展。

#### 内置的环境变量
Expand Down Expand Up @@ -127,9 +128,10 @@ Options API 示例
<!-- src/pages/my-new-page/index.vue -->
<templates>
<div>
<t-page-header>index.vue示例</t-page-header>
<t-page-header> index.vue 示例</t-page-header>
</div>
</templates>

<script>
export default {
components: {},
Expand All @@ -139,6 +141,7 @@ export default {
methods: {},
};
</script>

<style lang="less">
// 如果需要导入样式
@import "./index.less";
Expand All @@ -153,9 +156,10 @@ Composition API 示例
<!-- src/pages/my-new-page/index.vue -->
<templates>
<div>
<t-page-header>index.vue示例</t-page-header>
<t-page-header> index.vue 示例</t-page-header>
</div>
</templates>

<script setup>
import { ref, onMounted } from "vue";

Expand All @@ -172,6 +176,7 @@ onMounted(() => {
console.log(`The initial count is ${count.value}.`);
});
</script>

<style lang="less">
// 如果需要导入样式
@import "./index.less";
Expand All @@ -180,9 +185,9 @@ onMounted(() => {
</style>
```

**tips: 一般情况下推荐您使用`Composition API`进行开发，`Composition API`有关的好处请[点击此处](https://vuejs.org/guide/introduction.html#api-styles)**
**tips: 一般情况下推荐您使用 `Composition API` 进行开发，`Composition API` 有关的好处请 [点击此处](https://vuejs.org/guide/introduction.html#api-styles)**

然后，需要在配置新页面的路由。根据具体的需求，修改 `src/router/modules` 中的文件。
然后，需要在配置新页面的路由。根据具体的需求，修改 `./src/router/modules` 中的文件。

```javascript
export default [
Expand All @@ -208,15 +213,15 @@ export default [

菜单（侧边栏和面包屑）由路由配置自动生成，根据路由变化可自动匹配，开发者无需手动处理这些逻辑。

**tip：如果您对 vue 的开发方式不是很熟悉，可以查阅 [新手知识](https://vuejs.org/)。**
**tip：如果您对 Vue 的开发方式不是很熟悉，可以查阅 [新手知识](https://vuejs.org/)。**

#### 开发组件

当 TDesign 提供的组件不能满足您的需求的时候，您可以根据需要开发新的组件, 推荐放置在`src/component`目录下。
当 TDesign 提供的组件不能满足您的需求的时候，您可以根据需要开发新的组件, 推荐放置在 `./src/component` 目录下。

组件的开发方式和 **页面组件** 的开发方式类似，不过您不再需要去为它增加路由，而是在您的组件中引用即可。

首先，在 `src/components` 下新增一个组件文件，`new-component.vue`
首先，在 `./src/components` 下新增一个组件文件，`new-component.vue`

```vue
<!-- 自定义组件 new-component.vue -->
Expand All @@ -238,10 +243,11 @@ Options API 示例
<div>
<t-page-header>个人中心</t-page-header>
<!-- 使用组件，在组件中的内容会替换掉组件的slot-->
<my-component v-slot="{ 'new-component':'我插入slot组件的内容' }">
<my-component v-slot="{ 'new-component':'我插入 slot 组件的内容' }">
</my-component>
</div>
</template>

<script>
// 引入组件
import MyComponent from "@/components/new-component.vue";
Expand Down Expand Up @@ -273,15 +279,17 @@ Composition API 示例
<template>
<div>
<t-page-header>个人中心</t-page-header>
<!-- 使用组件，在组件中的内容会替换掉组件的slot-->
<my-component v-slot="{ 'new-component':'我插入slot组件的内容' }">
<!-- 使用组件，在组件中的内容会替换掉组件的 slot -->
<my-component v-slot="{ 'new-component':'我插入 slot 组件的内容' }">
</my-component>
</div>
</template>

<script setup>
// 引入组件
import MyComponent from "@/components/new-component.vue";
</script>

<style lang="less">
// 如果需要导入样式
@import "./index.less";
Expand All @@ -292,13 +300,13 @@ import MyComponent from "@/components/new-component.vue";

这样，一个简单的组件就可以投入使用了。

**tip 如果您对 vue 的开发方式不是很熟悉，可以查阅 [新手知识](https://vuejs.org/)。**
**tip 如果您对 Vue 的开发方式不是很熟悉，可以查阅 [新手知识](https://vuejs.org/)。**

### 布局配置

网站布局支持空布局、侧边栏导航布局、 侧边栏布局加头部导航和头部导航等四种中后台常用布局。布局文件位于 `./src/layouts`。

使用这些布局，您只需要在 `src/router` 中配置路由的时候，将 `父级路由` 配置成相应的布局组件就可以了。示例代码如下：
使用这些布局，您只需要在 `./src/router` 中配置路由的时候，将 `父级路由` 配置成相应的布局组件就可以了。示例代码如下：

```js
export default [
Expand Down