react-manager

安装与部署

创建项目

本项目 node 版本是 18.19.0

# 通过 npm 安装 yarn
npm install yarn -g
# 使用 yarn 创建 vite 项目
yarn create vite
# 执行上面命令后依次选择：react,TypeScript
# 表示创建 vite 项目，使用的库和语言依次是 react,TypeScript
# 这里要注意，由于 GFW 的问题，要做如下调整，才能顺利创建项目：
# 1. 设置 npm 为官方源：npm config set registry https://registry.npmjs.org/
# 2. 设置 npm 使用本地代理网络: 
#    npm config set proxy http://127.0.0.1:7890
#    npm config set https-proxy http://127.0.0.1:7890
# 3. 测试 yarn 版本：yarn -v (本项目的版本号是：1.22.22)
# 4. 测试浏览器访问地址：https://registry.npmjs.org/yarn
# 5. 上面都测试通过后在通过 yarn create vite 创建项目

# 安装依赖并测试运行项目
# 切换路径到项目根目录：D:\source\frontend\react\react-manager 下，执行下面命令安装依赖
yarn
# 运行下面命令运行项目
yarn dev

.editorconfig

先在 vscode 或者 webstorm 中安装 editorconfig 插件。在项目根目录下创建文件 .editorconfig 注意文件名前面有英文符号点，其内容如下

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

prettier

# 安装到开发依赖
yarn add prettier -D

项目根目录下创建文件 .prettierrc.cjs 。这里的 cjs 表示 common js

module.exports = {
  printWidth: 120,// 每行最大列数，超过则换行
  tabWidth: 2,// 缩进两个单位（tab或者空格）
  semi: false,// false表示代码结尾不使用分号
}

eslint

2024年8月10日 14:58:14 通过 yarn 创建时自动创建了文件 eslint.config.js ，那么本项目不再需要手动安装 eslint

vite.config.ts

要在 vite 配置文件中使用别名，例如使用艾特符号替代目录 src 需要用到 path，此时需要在项目中安装 node

yarn add @types/node -D

然后做如下配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  root: './', // 项目入口文件在本配置文件同级目录下，即文件 index.html
  base: '/api', // 浏览器地址栏中主机+端口号后面的项目名称
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

antd

# 安装 antd
yarn add antd