前端作业一

今天作业：
1、熟练创建Vite的vue项目；
2、熟练安装所需的工具VueRouter；
3、自己再做一遍，自己写出相关的代码；
4、美化页面，首页、关于我们；
5、论述vite项目的结构和加载的原理；
6、总结所用的技术，每个技术点50~100字：nodejs/npm/pnpm/vite/vue/vuerouter

五、

Vite 的项目结构通常包含以下主要部分：

1. src 目录：

   • 这是存放源代码的目录，包括你的主要 JavaScript、TypeScript、CSS 等文件。在这里编写你的应用程序代码。

2. public 目录：

   • 这个目录下的文件会被 Vite 原封不动地复制到最终构建的目录中，可以用来存放不需要经过构建处理的静态资源，如图片、字体文件等。

3. index.html 文件：

   • 这是应用的入口 HTML 文件，Vite 会根据这个文件和其中的引用来构建整个应用。

4. package.json 文件：

   • 这个文件包含了项目的元数据和依赖信息。Vite 在开发过程中会根据其中的配置来执行相应的构建和开发服务器配置。

Vite 加载原理

Vite 的核心特性之一是快速的开发服务器和即时预构建，其加载原理主要涉及到以下几个关键点：

1. 基于 ES 模块的开发：

   • Vite 利用了现代浏览器对 ES 模块的原生支持。在开发过程中，Vite 将每个模块作为一个独立的文件处理，并通过浏览器的原生 ES 模块支持直接加载，无需像传统构建工具那样将所有模块打包成一个或少数几个文件。

2. 按需编译：

   • 当浏览器请求某个模块时，Vite 会实时编译该模块，将其转换为浏览器可执行的代码。这种按需编译的方式避免了传统构建工具每次修改都需要重新构建整个应用的问题，加快了开发过程中的反馈速度。

3. HMR（热模块替换）支持：

   • Vite 内置了对热模块替换的支持，可以在开发过程中实时更新修改的模块，而不需要刷新整个页面。这一特性通过 WebSocket 技术实现，能够在代码修改时快速地将新代码推送到浏览器端。

六、总结所用的技术，每个技术点50~100字：nodejs/npm/pnpm/vite/vue/vuerouter

node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境，并且支持大量的第三方模块，使得开发更加高效和灵活

npm 是 Node.js 的包管理工具，用于安装、分享、管理 JavaScript 代码包和依赖项。

pnpm是另一种 JavaScript 包管理器，与 npm 和 Yarn 不同，减少磁盘空间的使用，并且更加快速和高效

vite个现代化的前端构建工具，专注于快速开发。它利用 ES 模块的特性进行快速的热更新，并且在开发过程中使用了预构建，使得构建速度极快，

vue一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序

vuerouter是 Vue.js 的官方路由器。它与Vue.js核心深度集成，使构建具有Vue.js的单页应用程序变得轻而易举。