跟着森老师学React Hooks(1)——使用Vite构建React项目

    Vite是一款构建工具，对ts有很好的支持，最近也是在前端越来越流行。

    以往的React项目的初始化方式大多是通过脚手架create-react-app(本质是webpack)，其实比起Vite来构建，启动会慢一些。

    所以这次跟着B站的一个教程，使用Vite来构建一下React项目(Node版本16+，低了会有问题)。

     1.初始化一个node项目shop-cart。

       创建一个目录shop-cart，使用vscode打开，在目录下依次运行(用yarn 也行)

npm init -y

npm i vite -D

    2. 安装插件(vitejs针对react变量全局注入的插件)

npm i @vitejs/plugin-react -D

    3. 安装React核心依赖和axios，以及express

 npm i react react-dom react-router-dom axios express

    4.修改package.json的scripts为:

  "scripts": {
    "dev": "vite",
    "server": "nodemon ./server.js"
  },

   5. 根据如下文件结构去新建文件和文件夹(暂时忽略server.js，现在为空)

   6.文件细节

   vite.config.js:

import { defineConfig } from "vite";
import { resolve } from "path";

import React from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [React()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
});

   index.html:

   src/Main.jsx:

import { createRoot } from "react-dom/client";

import App from "./App";

const root = createRoot(document.querySelector("#root"));

root.render();

    src/App.jsx:

export default function App() {
  return 
Hello, React-Vite
;
}

  7.运行npm run dev，默认端口5173，浏览器localhost:5173访问:

至此成功