Vite 2.x + React 项目模板搭建，并接入前端工程规范

Vite 2.x + React 项目模板搭建

Vite 是一个现代的前端构建工具，以其快速启动和构建速度而著称。它与 React 搭配，可以创建高效且现代化的 React 项目。

项目模板搭建

创建一个新的 Vite + React 项目：

npx create-vite-app my-app --template react

进入项目目录：

cd my-app

运行项目

npm run dev

接入前端工程规范

前端工程规范是一套约定和工具，用于确保代码质量和一致性。这里介绍如何将一些常见的规范工具集成到 Vite + React 项目中。

react-router-dom v6

react-router-dom 是 React 官方的路由库，用于管理单页应用程序中的路由。

安装：

npm install react-router-dom@6

使用：

import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

eslint

eslint 是一个用于检查 JavaScript 代码风格和错误的工具。

安装：

npm install eslint --save-dev

创建 .eslintrc.json 文件：

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "semi": ["error", "always"]
  }
}

运行：

npm run lint

prettier

prettier 是一个用于自动格式化代码的工具。

安装：

npm install prettier --save-dev

创建 .prettierrc.json 文件：

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true
}

运行：

npm run format

husky

husky 是一个用于在 Git 钩子中运行脚本的工具。

安装：

npm install husky --save-dev

创建 .huskyrc.json 文件：

{
  "hooks": {
    "pre-commit": "npm run lint && npm run format"
  }
}

现在，在提交代码之前，husky 会自动运行 eslint 和 prettier。

结语

通过使用 Vite 2.x + React 项目模板并接入前端工程规范，可以帮助您快速构建一个规范、高效的 React 项目，提高团队合作效率和代码质量。