Vite+React搭建开发构建环境实践记录

yarn create vite

yarn dev

yarn add eslint -D

yarn eslint --init

eslint-plugin-react@latest
eslint-config-standard-with-typescript@latest
@typescript-eslint/eslint-plugin@^5.0.0
eslint@^8.0.1
eslint-plugin-import@^2.25.2
eslint-plugin-n@^15.0.0
eslint-plugin-promise@^6.0.0
typescript@* // 这个可以移除

yarn add vite-plugin-eslint -D

//...
import eslint from "vite-plugin-eslint";
export default defineConfig({
    plugins: [react(), eslint()],
    //...
});

yarn add @typescript-eslint/parser -D

"parserOptions": {
    //...
    "project": "tsconfig.json"
},

yarn add eslint-config-prettier eslint-plugin-prettier -D

{
    "extends": [
        //...
        "plugin:prettier/recommended"
    ],
}

{
    "rules": {
        "react/react-in-jsx-scope":"off", // 使用 jsx 时不需要引用 React
        "@typescript-eslint/strict-boolean-expressions":"off" // 表达式中的布尔值必须严格是布尔类型
    }
}

yarn add prettier -D

{
    printWidth: 100,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    jsxSingleQuote: false,
    endOfLine: 'lf'
}

yarn add react-router-dom

//...
import {RouterProvider} from "react-router-dom";
import router from './router';

//...
ReactDOM.createRoot(document.getElementById('root') as htmlElement).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

import { createBrowserRouter } from 'react-router-dom';
import Framework from './Framework';
import Error from './Error';
import Home from '@/pages/home';
import About from '@/pages/about';

const router = createBrowserRouter([
    {
        path: '/',
        element: <Framework />,
        errorElement: <Error />,
        children: [
            {
                path: 'home',
                element: <Home />,
            },
            {
                path: 'about',
                element: <About />,
            },
        ],
    },
]);

export default router;

yarn add antd

@import 'antd/es/style/themes/default.less';
@import 'antd/dist/antd.less';

@primary-color: #4294ff; // 更换全局主色

//...
export default defineConfig({
     //...
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
});

import reactLoGo from "@/assets/react.svg";

//...
import path from "path";

export default defineConfig({
    //...
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
});

yarn add path -D

yarn add @types/node -D

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

yarn add less

import styles from "./App.module.less";