使用vite创建一个react18项目

一、vite是什么?

vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

二、使用vite创建一个react18项目

  1. 执行指令。

    js 复制代码
    // npm
    npm create vite@latest

    使用 yarn 包管理器则执行以下指令:

    js 复制代码
    // yarn
    yarn create vite

    使用 pnpm 包管理器则执行以下指令:

    js 复制代码
    // pnpm
    pnpm create vite
  2. 输入项目名称。

  3. 选择React项目模板,空格按钮确认。

  4. 选择变种语言 TypeScript。

  5. 进入项目目录,执行 npm install 安装 node_modules,完成后,输入指令 npm run dev 启动程序。

  6. 项目目录。

三、使用react18技术栈(全家桶)中后台管理项目模板

相关推荐
aiguangyuan5 小时前
React 中什么是可中断更新?
javascript·react·前端开发
人工智能训练16 小时前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js
特级业务专家2 天前
续集:Vite 字体插件重构之路 —— 从“能用”到“生产级稳定”
javascript·vue.js·vite
aiguangyuan2 天前
React中Context 的作用及原理
javascript·react·前端开发
一只小阿乐2 天前
react 中的判断显示
前端·javascript·vue.js·react.js·react
特级业务专家4 天前
把 16MB 中文字体压到 400KB:我写了一个 Vite 字体子集插件
javascript·vue.js·vite
fredricen4 天前
用LangChain1.0搭建第一个天气查询智能体
llm·agent·react·langchaian
在未来等你4 天前
AI Agent设计模式 Day 7:Tree-of-Thoughts模式:树形思维探索
设计模式·llm·react·ai agent·plan-and-execute
一只小阿乐5 天前
react 点击事件注意事项
前端·javascript·react.js·react
isyuah7 天前
vite-plugin-openapi-ts CLI 使用指南
前端·vite