使用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技术栈(全家桶)中后台管理项目模板

相关推荐
Small-K2 天前
前端框架中@路径别名原理和配置
前端·webpack·typescript·前端框架·vite
B.-4 天前
在 React 项目中渲染 Markdown 文件
前端·javascript·react.js·ecmascript·react
计时开始不睡觉5 天前
【React】入门Day01 —— 从基础概念到实战应用
前端·前端框架·react
小茹想睡觉5 天前
vite 底层解析
vite
闪光桐人7 天前
uniapp/vue项目 import 导入文件时提示Module is not installed,‘@/views/xxx‘路径无法追踪
前端·vue.js·webpack·uni-app·vite
MavenTalk7 天前
2024前端技术发展概况
前端·vue·nodejs·react·angular·大前端
终末圆11 天前
【前端 25】
前端·css·前端框架·html·reactjs·react·js
AmHardy12 天前
现代前端构建工具对比:Vue CLI、Webpack 和 Vite
webpack·前端框架·vite·构建工具·vue cli
Amd79412 天前
Nuxt Kit 实用工具的使用示例
webpack·api·vite·配置·nuxt·构建·kit
Amd79413 天前
使用 Nuxt Kit 的构建器 API 来扩展配置
webpack·vite·前端开发·插件·nuxt kit·扩展配置·构建器 api