海上灵光

使用 vite 创建 react 项目

npm create vite@latest

配置项目别名

1. 安装 @types/node

npm install -D @types/node

2. 配置 vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path"; // npm install -D @types/node

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

配置完上述内容就可以通过 import x from ”@/x” 导入了，但是 vscode 中可能没有路径提示

3. 路径提示

在 jsconfig.json / tsconfig.json 中配置

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "@/*": ["src/*"]
    }
},

对于最新的项目会存在 jsconfig.json、jsconfig.app.json、jsconfig.node.json 三个文件，通常对于浏览器项目需要在 app 文件中进行配置

安装 Tailwind css

该步不是必须的，根据需要配置，了解 Tailwind css

官方安装文档：https://v3.tailwindcss.com/docs/guides/vite

目前 Tailwind css 已发布 v4 版本，以下是 Tailwind css 3 的安装过程

1. 安装

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

2. tailwind.config.js

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

3. 在 css 文件中

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