初始化项目

项目创建与配置

一、初始化项目

1. 创建项目

   C:\code>npm init vite@latest
   √ Project name: ... vite-react
   √ Select a framework: » React
   √ Select a variant: » TypeScript
   
   Scaffolding project in C:\code\vite-react...
   
   Done. Now run:
   
   cd vite-react
   npm install
   npm run dev
   

2. 安装依赖

   npm i
   npm i --save antd
   npm i --save @ant-design/icons
   npm i @reduxjs/toolkit react-redux
   npm i react-router-dom
   npm run dev
   

3. 查看项目配置

   {
     "name": "vite-react",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
       "dev": "vite --host --port 3002 --open", // 这里要修改
       "build": "tsc && vite build",
       "preview": "vite preview"
     },
     "dependencies": {
       "@ant-design/icons": "^4.8.0",
       "@reduxjs/toolkit": "^1.9.1",
       "antd": "^5.0.4",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "react-redux": "^8.0.5",
       "react-router-dom": "^6.4.4"
     },
     "devDependencies": {
       "@types/react": "^18.0.24",
       "@types/react-dom": "^18.0.8",
       "@vitejs/plugin-react": "^2.2.0",
       "typescript": "^4.6.4",
       "vite": "^3.2.3"
     }
   }
   

二、调整项目文件

4. 项目目录

    $ ls src/
    App.tsx  main.tsx  vite-env.d.ts
   

5. App.tsx 调整内容

   function App() {
     return (
       <div className="App">
         <p>顶级组件</p>
       </div>
     );
   }
   
   export default App;
   

6. 入口文件 main.tsx

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   
   ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
   

三、样式初始化

7. 安装 reset-css

   npm i reset-css
   

8. main.tsx 引入样式

   // etc...
   // 正确的引入顺序, 最前面 => UI框架的样式 => 全局样式 => 组件的样式
   import "reset-css";
   import App from "./App";
   // etc...
   

9. 安装 sass

   npm i -save-dev sass
   npm i -D @types/node
   

10. vite.config.ts 配置路径别名

    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import path from "path";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
    });
    

11. tsconfig.json 配置路径提示

    {
      "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        // 这里
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
        // 这里
      },
      "include": ["src"],
      "references": [{ "path": "./tsconfig.node.json" }]
    }
    

12. 创建全局样式文件 src\assets\styles\global.scss

    $color: red;
    
    body {
      // 禁止选中文字
      user-select: none;
      background-color: aquamarine;
    }
    
    img {
      // 禁止图片拖动
      -webkit-user-drag: none;
    }
    
    // 首页样式 可以写在全局
    .logo {
      height: 32px;
      margin: 16px;
      background: rgba(255, 255, 255, 0.3);
    }
    
    .site-layout .site-layout-background {
      background: #ccc;
    }
    

13. main.tsx 中引入, 样式起作用

    // etc...
    // 正确的引入顺序, 最前面 => UI框架的样式 => 全局样式 => 组件的样式
    import "reset-css";
    import "@/assets/styles/global.scss";
    import App from "./App";
    // etc...