diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..e3ede1b --- /dev/null +++ b/.npmignore @@ -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 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..14fac91 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md index 40ede56..61eb3c0 100644 --- a/README.md +++ b/README.md @@ -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
About
; +} +``` + +## 发布为 GitHub 模板仓库 + +如果你要把这个项目作为模板发布： + +1. 推送到 GitHub +2. 进入仓库 **Settings** +3. 勾选 **Template repository** + +之后其他人就可以通过 **Use this template** 使用它。 + +## License + +MIT diff --git a/index.html b/index.html index e4b78ea..cdea00f 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,11 @@ - - Vite + React + TS + + React Vite App
diff --git a/package.json b/package.json index be48288..3b50e7a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "eco-steps", + "name": "react-vite-template", "private": true, "version": "0.0.0", "type": "module", diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx index cc8ac3f..aa58eb3 100644 --- a/src/pages/About/About.tsx +++ b/src/pages/About/About.tsx @@ -1,7 +1,7 @@ import { Link } from "react-router-dom"; import { Button } from "@/components/common"; -export function About() { +export default function About() { return (

关于我们

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 3b473dd..e520c9d 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,7 +1,7 @@ import { Link } from "react-router-dom"; import { Button } from "@/components/common"; -export function Home() { +export default function Home() { return (

首页

diff --git a/src/router/index.tsx b/src/router/index.tsx index c7140b5..e5e03f4 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -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: , + lazy: lazyRoute(() => import("../pages/Home/Home")), }, { path: "about", - element: , + lazy: lazyRoute(() => import("../pages/About/About")), }, ], }, diff --git a/src/utils/index.ts b/src/utils/index.ts index b10ebca..f3bafc7 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1,3 @@ export * from "./assets"; +export * from "./lazyRoute"; export * from "./tailwind"; diff --git a/src/utils/lazyRoute.ts b/src/utils/lazyRoute.ts new file mode 100644 index 0000000..2f1c798 --- /dev/null +++ b/src/utils/lazyRoute.ts @@ -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 }; + }; +} diff --git a/vite.config.ts b/vite.config.ts index d8d5151..a602b3e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,4 +10,7 @@ export default defineConfig({ "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, + server: { + host: true, + }, });