forked from zhongyidian/food-add-edu
feat: 准备 GitHub 模板仓库
This commit is contained in:
zhongyidian committed
1 parent
33121e3f6d
commit
ae021f06d1
11 files changed
+163
-52
No files matched your search
+27
@@ -0,0 +1,27 @@
|
||||
# Dependencies
|
||||
node_modules
|
||||
bun.lock
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
pnpm-lock.yaml
|
||||
|
||||
# Build outputs
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
|
||||
# IDE
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
|
||||
# Temp
|
||||
*.tmp
|
||||
*.temp
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,54 +1,102 @@
|
||||
# React + TypeScript + Vite
|
||||
# React Vite Template
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
一个基于 React 19、TypeScript、Vite、React Router 和 Tailwind CSS 的前端项目模板。
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## 特性
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
- React 19 + TypeScript
|
||||
- Vite 6 开发与构建
|
||||
- React Router 7 路由管理
|
||||
- 路由页面懒加载
|
||||
- Tailwind CSS 4
|
||||
- Biome 代码格式化与检查
|
||||
- Husky + lint-staged 提交前检查
|
||||
- `@` 指向 `src` 的路径别名
|
||||
- 组件分层：通用组件、业务组件、页面组件
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
## 使用模板
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
### 通过 GitHub 页面创建
|
||||
|
||||
```js
|
||||
export default tseslint.config({
|
||||
extends: [
|
||||
// Remove ...tseslint.configs.recommended and replace with this
|
||||
...tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
...tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
...tseslint.configs.stylisticTypeChecked,
|
||||
],
|
||||
languageOptions: {
|
||||
// other options...
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
})
|
||||
1. 打开模板仓库页面
|
||||
2. 点击 **Use this template**
|
||||
3. 创建自己的新仓库
|
||||
4. 克隆新仓库并安装依赖
|
||||
|
||||
```bash
|
||||
git clone https://github.com/your-name/your-app.git
|
||||
cd your-app
|
||||
bun install
|
||||
bun dev
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
### 通过 GitHub CLI 创建
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default tseslint.config({
|
||||
plugins: {
|
||||
// Add the react-x and react-dom plugins
|
||||
'react-x': reactX,
|
||||
'react-dom': reactDom,
|
||||
},
|
||||
rules: {
|
||||
// other rules...
|
||||
// Enable its recommended typescript rules
|
||||
...reactX.configs['recommended-typescript'].rules,
|
||||
...reactDom.configs.recommended.rules,
|
||||
},
|
||||
})
|
||||
```bash
|
||||
gh repo create my-react-app --template your-name/react-vite-template --public
|
||||
cd my-react-app
|
||||
bun install
|
||||
bun dev
|
||||
```
|
||||
|
||||
创建项目后，建议修改 [package.json](package.json) 中的 `name` 字段。
|
||||
|
||||
## 开发命令
|
||||
|
||||
```bash
|
||||
bun dev # 启动开发服务器
|
||||
bun build # 类型检查并构建生产版本
|
||||
bun preview # 预览生产构建
|
||||
bun lint # 代码检查
|
||||
bun lint:fix # 自动修复代码问题
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
|
||||
```text
|
||||
src/
|
||||
├── api/ # API 请求相关代码
|
||||
├── assets/ # 项目资源
|
||||
├── components/ # 组件
|
||||
│ ├── business/ # 业务组件
|
||||
│ └── common/ # 通用组件
|
||||
├── hooks/ # 自定义 Hooks
|
||||
├── pages/ # 页面组件
|
||||
├── router/ # 路由配置
|
||||
├── styles/ # 全局样式
|
||||
├── types/ # TypeScript 类型
|
||||
└── utils/ # 工具函数
|
||||
```
|
||||
|
||||
## 路由懒加载
|
||||
|
||||
模板内置了 `lazyRoute` 工具函数，新页面可以这样配置：
|
||||
|
||||
```tsx
|
||||
{
|
||||
path: "about",
|
||||
lazy: lazyRoute(() => import("../pages/About/About")),
|
||||
}
|
||||
```
|
||||
|
||||
页面组件使用默认导出：
|
||||
|
||||
```tsx
|
||||
export default function About() {
|
||||
return <div>About</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## 发布为 GitHub 模板仓库
|
||||
|
||||
如果你要把这个项目作为模板发布：
|
||||
|
||||
1. 推送到 GitHub
|
||||
2. 进入仓库 **Settings**
|
||||
3. 勾选 **Template repository**
|
||||
|
||||
之后其他人就可以通过 **Use this template** 使用它。
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
+5
-2
@@ -3,8 +3,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
||||
/>
|
||||
<title>React Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "eco-steps",
|
||||
"name": "react-vite-template",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/common";
|
||||
|
||||
export function About() {
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">关于我们</h1>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/common";
|
||||
|
||||
export function Home() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">首页</h1>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createHashRouter } from "react-router-dom";
|
||||
import App from "../App.tsx";
|
||||
import { About, Home } from "../pages";
|
||||
import { lazyRoute } from "../utils";
|
||||
|
||||
export const router = createHashRouter([
|
||||
{
|
||||
@@ -9,11 +9,11 @@ export const router = createHashRouter([
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <Home />,
|
||||
lazy: lazyRoute(() => import("../pages/Home/Home")),
|
||||
},
|
||||
{
|
||||
path: "about",
|
||||
element: <About />,
|
||||
lazy: lazyRoute(() => import("../pages/About/About")),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from "./assets";
|
||||
export * from "./lazyRoute";
|
||||
export * from "./tailwind";
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { ComponentType } from "react";
|
||||
|
||||
export function lazyRoute(loader: () => Promise<{ default: ComponentType }>) {
|
||||
return async () => {
|
||||
const module = await loader();
|
||||
return { Component: module.default };
|
||||
};
|
||||
}
|
||||
@@ -10,4 +10,7 @@ export default defineConfig({
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user