目录

一、Vite的介绍

二、Vite创建Vue3工程化项目

Vite+Vue3项目的创建、启动、停止

创建

启动

停止

---

干净感来源于对自我的驯服

                                —— 24.10.23

一、Vite的介绍

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 webpack、Rolup 和 Parce等工具的变迁，它们极大地改善了前端开发者的开发体验

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

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多

Javascript 工具使用编译型语言编写。htps:/n.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面：

① 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力。

② 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量。

③ 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑。

④ 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等。

---

二、Vite创建Vue3工程化项目

Vite+Vue3项目的创建、启动、停止

创建

打开Vs-code的命令行窗口（右上角打开）

注：第一次使用vite会提示下载vite，输入y回车，下次使用时，提示就不会出现了

@latest表明：使用最新版本，如果@后不指定版本号，默认最新版本

第一次使用vite提示安装，输入y确认安装

---

之后使用vite创建项目，则不会提示安装

---

声明了需要使用的框架，但是具体文件没有下载

---

进入项目中，下载项目所需的依赖

VS-code中打开终端，输入：

cd 项目名

跳转到项目文件夹

---

 按照package.json中文件的记载自动下载项目所需的依赖

npm i

---

下载完毕

---

启动

npm run 以研发模式运行项目 运行package.json文件中的scripts模块内包含的信息

npm run + 命令

---

npm run dev运行项目

显示运行成功

---

停止

按住Ctrl点击跳转网址，进入浏览器，代表构建的vite项目成功

---

项目停止，按住Ctrl+c，进行确认，停止项目