手摸手带你搭建博客后台（一）前端项目搭建前言最近工作不饱和（不是），自己想要学习下nestjs，所以准备搭建一个自己的

前言

最近工作不饱和（不是），自己想要学习下nestjs，所以准备搭建一个自己的博客系统来练下手。

常年使用vue和anyScript，所以后台系统前端打算用react+ts搭建；后端就采用nestjs。

项目搭建

采用 pnpm + react + vite + ts搭建项目

pnpm create vite wy-blog-react --template react-ts

然后按照提示，执行命令启动项目：

项目结构

我们最初的项目结构如下：

下面我们梳理下项目结构，添加对应的模块文件，删除不需要的文件

apis: 接口请求

assets：静态资源

components：公用组件

hooks: 封装的 hooks

routes：路由

store：状态管理

types：定义ts类型

utils：常用的工具

views：视图

修改完后的项目结构如下：

Ant Design

接下来我们安装UI组件库，这里选择Ant Design。

pnpm install antd --save

定制主题

Tailwindcss

一、安装 Tailwind CSS

我们采用Using PostCSS方式安装

npm install -D tailwindcss postcss autoprefixer

二、创建tailwind.config.js、postcss.config.js 配置文件

npx tailwindcss init可以帮你直接创建

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
export default {
    plugins: [
        tailwindcss,
        autoprefixer,
    ],
}

三、引入@tailwind指令

在assets下添加css来维护样式文件，添加@tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

四、使用

这里没有使用类似scss、less这种预处理器，后期如果必要再加；可根据自己实际情况添加。

路由

安装路由

pnpm add react-router-dom
创建测试路由

在views下添加home组件

将home添加到路由

在routes中添加index.tsx

import { createBrowserRouter } from "react-router-dom";
import HomeLayout from "@/views/home";

const routers = createBrowserRouter([
    {
        path: "/",
        element: <HomeLayout />,
        children: [],
    },
]);

export default routers;

在App.tsx文件中添加路由

import { RouterProvider } from 'react-router-dom'
import routers from '@/routes'

function App() {

  return (
    <>
    <div>dadads</div>
      <RouterProvider router={routers} />
    </>
  )
}

export default App

配置路径别名

在vite.config.ts中添加路径别名

虽然路径别名在页面是生效的，我们看到文件中有红色错误提示，ai也给出提示需要安装@types/node。

pnpm add @types/node -D

然后我们看到文件中使用的@/路径还是会有红色下划线：

我们在tsconfig.json添加配置
```
"paths": {
  "@/*": ["./src/*"]
},
```
也可以采用添加"baseUrl": "./"

采用脚手架默认生成的模版tsconfig.json配置是这样的，我添加在tsconfig.app.json，你也可以直接把配置写在tsconfig.json中维护。

配置 prettier

pnpm add prettier -D

添加配置文件.prettierrc

{
   "semi": false,
   "singleQuote": true,
   "printWidth": 120,
   "useTabs": false,
   "tabWidth": 4,
   "trailingComma": "es5",
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "endOfLine": "auto",
   "singleAttributePerLine": true,
   "htmlWhitespaceSensitivity": "ignore",
   "overrides": [
       {
           "files": ".prettierrc",
           "options": {
               "parser": "json"
           }
       }
   ]
}

然后执行格式化所有文件，对于不需要格式化的文件可以添加.prettierignore处理。

配置 eslint

我们默认创建出来的项目，是默认帮我们生成了一个eslint配置eslint.config.js。

我添加一个测试错误代码，然后执行默认lint脚本

然后看到控制台报错了：

查了下原因和node版本有关，structuredClone方法是在Node.js17引入的，我本地使用的是16，于是我升级看node版本到18处理这个问题。

然后看到有正确语法错误校验

添加 git 提交语法校验

安装 lint-staged 和 husky：

pnpm add -D lint-staged husky
执行 npx husky init

会在package.json中自动创建出一个npm命令：

同时也会生成husky的文件目录：
配置 lint-staged：

在 package.json 文件中添加 lint-staged 配置，指定在提交时需要运行的脚本。
配置 pre-commit：

.husky 下的 pre-commit 中增加npm run lint-staged
添加 .husky 到 .gitignore：
提交测试