项目初始化
// 1. 项目初始化
yarn create vite my-first-react-app --template react-ts
// 2. 安装依赖
yarn
// 3. 启动项目
yarn dev
这时候你应该可以打开网页，看到一个类似这样的页面
项目构建
路径别名
作用： 将项目的路径统一化，如原来的./login-page 转变成 src/login-page
需要安装2个东西
yarn add path
yarn add @types/node --dev
需要在2个文件里配置
// tsconfig.json
"compilerOptions": { // 配置别名
"baseUrl": ".", //未设置 "baseUrl" 时，不允许使用非相对路径。
// "paths":{ // "$/*": ["src/*"], // }, // 如果希望路径自定义如$开头的需要这一步，但如果只是src开头的这一步可以省略
},
// vite.config.ts
import path from 'path' // 实现路径别名, yarn add path
export default defineConfig({ // 路径别名alias
resolve: { alias: { 'src': path.resolve(__dirname, './src'), // 如果报了__dirname没找到记得安装yarn add @types/node --dev,设置路径开头以src开头
// '$': path.resolve(__dirname, './src'), // 设置路径以$开头
} } })
