工程安装与部署

进度

• 2024年8月1日 第一天

npm

更改 npm 默认源为国内

npm config set registry https://registry.npmmirror.com

创建项目

创建项目 - 黑马

安装依赖

npx create-react-app react-base
# 安装一系列依赖:redux,router,dayjs,classnames,antd-mobile,axios
npm i @reduxjs/toolkit react-redux react-router-dom dayjs classnames antd-mobile axios

配置别名路径

使用craco制作别名路径

json-server

mock数据使用插件 json-server

1. 安装依赖 npm i -D json-server

2. 在项目根目录下创建目录及文件：server/data.json，其中填写 json 格式的数据

   {
       "userList":[
           {"uid":1001,"uname":"张三"},{"uid":1002,"uname":"李四"}
       ],
       "goodsList":[
           {"goodsId":1001,"goodsName":"苹果"},{"goodsId":1002,"goodsName":"香蕉"}
       ]
   }
   

3. 项目配置文件 package.json 中设置启动服务的命令："server": "json-server ./server/data.json --port 8888"

4. 访问接口进行测试。注意本案例新增的目录 server 并不在 src 下，而是和 src 同级目录。运行命令 npm run server 启动服务 cmd 会提示 API

create-react-app 创建

创建项目

官方推荐使用本方法。创建一个 Typescript 语言的 React 项目

npx create-react-app react-ts-demo --template typescript

创建项目后 cd 切换路径到项目顶级目录下（项目名称是 react-ts-demo，那么就切换到该目录下），运行 npm start 运行项目

安装 prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

上面使用的参数最终在项目中安装为开发依赖（非运行依赖）

开发依赖

手动添加 eslintrc.js

在项目根目录下（与文件 package.json 同目录）创建文件 .eslintrc.js 注意文件前面有个英文点，其中内容如下

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaversion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react", "@typescript-eslint"
    ],
    "rules": {}
}

注意做完上面配置文件后在 vs code 中安装 Prettier - Code formatter 插件，之后在项目 package.json 中添加使用 prettier 格式化代码的命令

"scripts": {
	...
	"format": " npx prettier --write 'src/**/*.{js,ts,jsx,tsx}' "
},

保持之前的命令不变，添加新命令 format

eslint

vs code 中安装 eslint 插件

在项目根目录下创建文件 .eslintrc.js 其内容如下

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "overrides": [],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaversion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react", "@typescript-eslint"
    ],
    "rules": {}
}

并在项目根目录下创建文件夹 .vscode 注意目录名称前面有个英文点，并在其下创建文件 settings.json 其内容如下

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    }
}

重启 vs code 之后每次保存文件 vs code 都会自动格式化代码

commitlint

安装并配置

# 安装
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# 配置
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# 安装 husky
npm install husky --save-dev
# 配置
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

vite 创建

npm create vite@lastest react-demo-vite --template react-ts