vite 创建vue3

53 阅读2分钟

前言

在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。

然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。


一、vite是什么?

vite是一种新的打包工具、打包速度快,可以提高研发体验,主要部分为 devServe和生产构建。

二、创建步骤

1.下载vite

代码如下(示例):

//使用npm
npm create vite@latest
//使用 Yarn
yarn create vite
//使用pnpm
pnpm create vite

2.创建vite

1:npm create vite@latest
2:输入文件名称
2:选择你要创建的框架(这里选择vue框架)
3:选择一个编程语言

三、图片实例

1.输入文件名称

1693878347586.jpg

2.选择框架(这里选择vue框架 空格选择)

1693878429984.jpg

3.选择语言 (这里选择typeScript 空格选择)

1693878700708.jpg

4. 创建完毕

1693878795966.jpg

总结

以上就是简单的vite创建 我是一个每天挣窝囊费的落魄前端