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

相关推荐
光头程序员12 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
Dragon Wu2 天前
前端框架 react 性能优化
前端·javascript·react.js·性能优化·前端框架·react
王解3 天前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
景天科技苑4 天前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
大得3695 天前
css水平居中+垂直居中
vue.js·react
niech_cn6 天前
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
vite
Amd7948 天前
Nuxt.js 应用中的 vite:compiled 事件钩子
自定义·vite·编译·nuxt·热更新·性能·钩子
黑色的糖果8 天前
npm上传自己封装的插件(vue+vite)
前端·vue.js·npm·vite
软件小伟8 天前
Vite是什么?Vite如何使用?相比于Vue CLI的区别是什么?(一篇文章帮你搞定!)
前端·vue.js·ecmascript·vite·vue vli