• 跟着森老师学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为:

    1.  
    2.   "scripts": {
    3.     "dev": "vite",
    4.     "server": "nodemon ./server.js"
    5.   },

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

       6.文件细节

       vite.config.js:

    1. import { defineConfig } from "vite";
    2. import { resolve } from "path";
    3.  
    4. import React from "@vitejs/plugin-react";
    5.  
    6. export default defineConfig({
    7.   plugins: [React()],
    8.   resolve: {
    9.     alias: [
    10.       {
    11.         find: "@",
    12.         replacement: resolve(__dirname, "src"),
    13.       },
    14.     ],
    15.   },
    16. });

       index.html:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Shop Carttitle>
    7. head>
    8. <body>
    9.     <div id="root">div>
    10.     <script type="module" src="./src/Main.jsx">script>
    11. body>
    12. html>

       src/Main.jsx:

    1. import { createRoot } from "react-dom/client";
    2.  
    3. import App from "./App";
    4.  
    5. const root = createRoot(document.querySelector("#root"));
    6.  
    7. root.render(<App />);

        src/App.jsx:

    1. export default function App() {
    2.   return <div>Hello, React-Vitediv>;
    3. }

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

    至此成功

  • 相关阅读:
    基于单片机的室内空气质量监控系统设计
    01-JVM-类加载篇
    【Django入门】第一个Django项目
    源启容器平台KubeGien 打造云原生转型的破浪之舰
    VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout
    linux查看用户相关信息的命令
    【Github】Github创建远程库
    697226-52-1， 细胞穿膜肽TAT-amide
    5(6)-羧基四甲基罗丹明，CAS号：150347-56-1
    C 不再是一种编程语言
  • 原文地址：https://blog.csdn.net/Richard1997/article/details/134298469