初识vue

1.创建vite的vue项目

 使用vite创建vue项目：pnpm create vite my-vue-app --template vue

2.安装所需工具VueRouter

 添加路由组件：pnpm add vue-router@4

3.相关代码及步骤

 首先创建项目

接着运行上述界面中的三个指令

 复制Local后面的网址即可顺利访问

根据我们的需求进行添加pages和router两个目录，pages用来存放页面，router用来存放路由。

 

编写pages中的静态页面home.vue和about.vue

编写router/index.js文件

 在main.js中引入router/index.js，并使用这个路由

 

 

4.美化页面，首页，关于我们

 首页：

<template>
	<div class="box">
		<img src="../../public/Kentucky_Town.webp">
		<div class="box-text">KFC Thailand Pops Up to Celebrate 40 years of Joy with “KENTUCKY TOWN BANGKOK”</div>
	</div>
	<div class="label-list"> 
		<div class="label-1"></div>
		<div class="label-1"></div>
		<div class="label-1"></div>
	</div>
	<div>
		<span id="title">HISTORY OF THE BRAND AND COLONEL SANDERS</span>
		<p id="content">KFC, a subsidiary of Yum! Brands, Inc. (NYSE: YUM.), is a global chicken restaurant brand with a rich, decades-long history of success and innovation. It all started with one cook, Colonel Harland Sanders, who created a finger lickin’ good recipe more than 80 years ago, a list of secret herbs and spices scratched out on the back of the door to his kitchen. Today we still follow his formula for success, with real cooks breading and freshly preparing our delicious chicken by hand in more than 26,000 restaurants in over 150 countries and territories around the world.</p>
	</div>
</template>

<script>
</script>

<style scoped>
	.box{
		overflow: hidden;
		height: 535px;
		width: 1513px;
		margin: 0 auto;
		margin-top: 10px;
		max-width: 1730px;
		position: relative;
	}
	img{
		width: 1513px;
	}
	.box-text{
		position: absolute;
		left: 164px;
		top: 400px;
		font-size: 30px;
		font-weight: bold;
		color: white;
		
	}
	
	#content{
		width: 1280px;
		display:block;
		margin: 0 auto;
	}
	
	#title{
		font-size: 27px;
		font-weight: bold;
	}
	
	.label-list{
		width: 360px;
		display: flex;
		margin: 0 auto;
		margin-bottom: 50px;
	}
	.label-1{
		width: 60px;
		height: 50px;
		background-color: red;
		margin-right: 50px;
	}
</style>

关于我们：

<template>
	<div class="box">
		<img src="../../public/about-label.jpg">
	</div>
	<h1>关于我们</h1>
	<p class="text-content">
		肯德基（KFC），创立于1952年，由哈兰·山德士上校在美国肯塔基州发起，是全球知名的跨国连锁餐厅，主打特色炸鸡，辅以汉堡、薯条、蛋挞等多样化快餐食品。作为世界第二大速食企业，KFC在全球范围内享有盛誉，尤其在中国市场，由百胜中国控股经营，门店数已突破1万家。品牌标志性的红色与白色装潢以及“吮指回味，自在滋味”的广告语深入人心，尽管该标语在2020年因疫情考量而暂停使用。KFC与百事可乐的战略合作，使其餐厅内固定供应百事系列饮品。历经数十年发展，KFC已成为全球快餐文化的标志性品牌之一。
	</p>
</template>

<script>
</script>

<style scoped>
	.box{
		overflow: hidden;
		height: 535px;
		width: 1513px;
		margin: 0 auto;
		margin-top: 10px;
		max-width: 1730px;
		position: relative;
	}
	
	img{
		width: 1513px;
	}
	
	.text-content{
		width: 1200px;
		margin: 0 auto;
	}
</style>

5.vite项目的结构与加载的原理

Vite 是一个现代的前端构建工具，它利用了现代浏览器对 ES 模块（ESM）的原生支持，提供了一种快速且高效的开发体验。下面我会解释 Vite 项目的结构以及它是如何加载模块的。

        Vite 项目结构

Vite 项目的结构通常包含以下几个部分：

1. **`src` 目录**：
   - 这是存放源代码的主要位置，包括组件、样式、脚本等。
   - `index.html` 文件通常位于根目录下，作为 HTML 页面的入口。
   - `main.js` 或 `main.ts` 文件作为 JavaScript 执行的入口点。

2. **`public` 目录**：
   - 这个目录下的静态资源不会被 Vite 处理，而是直接复制到输出目录中。
   - 通常用于放置 favicon、robots.txt、manifest.json 等文件。

3. **`node_modules` 目录**：
   - 包含项目的所有依赖包。

4. **`package.json` 文件**：
   - 包含项目的元数据和依赖关系列表。

5. **`.gitignore` 文件**：
   - 列出了不需要提交到版本控制系统的文件或目录。

6. **`vite.config.js` 文件**：
   - Vite 的配置文件，用于定义构建过程中的各种选项和插件。

        加载原理

Vite 的加载机制基于以下几点：

1. **按需加载**：
   - 在开发模式下，Vite 不会预先打包所有的代码，而是当浏览器请求特定的模块时才加载该模块。这得益于浏览器对 ESM 的支持。

2. **预编译**：
   - 使用 esbuild 或其他工具预编译代码，如 TypeScript 转换为 JavaScript。

3. **即时模块热更新 (HMR)**：
   - Vite 提供了基于 ESM 的热模块替换功能，当源代码发生变化时，仅重新加载受影响的部分，而无需刷新整个页面。

4. **冷启动快**：
   - Vite 使用服务器端模块打包（SSMB），这意味着它在开发模式下不需要等待整个项目构建完毕就可以运行。

5. **模块代理**：
   - Vite 启动一个 HTTP 服务器，当浏览器请求模块时，Vite 服务器会拦截这些请求，并动态地处理和返回模块。

6. **模块图构建**：
   - Vite 动态构建模块图，只加载和编译实际使用的模块，而不是像传统打包工具那样预先构建整个依赖树。

总之，Vite 通过利用现代浏览器的功能和先进的构建技术，提供了更快的开发迭代速度和更优的模块加载策略，使得开发者能够更加高效地进行前端开发工作。

 

 

6.总结所用的项目所用技术 

node.js

 Node.js 是一个开源、跨平台的JavaScript运行环境，基于Chrome的V8引擎，使开发者能用JavaScript编写服务器端应用程序。它采用事件驱动、非阻塞I/O模型，特别适合构建轻量、高性能的网络应用，如实时通信、微服务架构等，同时拥有庞大的生态系统NPM，支持丰富的第三方模块。

npm

 npm（Node Package Manager）是随Node.js一同发布的包管理器，用于管理和分发JavaScript模块和库。npm允许开发者轻松安装、更新、卸载项目依赖，同时也支持用户发布和共享自己的代码包，构建了一个庞大的开源软件注册中心，极大地促进了JavaScript生态的繁荣和发展。

pnpm

 pnpm（performant npm）是一种高性能的包管理器，专为Node.js设计，优化了npm的性能和磁盘空间使用。通过使用硬链接和全局存储，pnpm加速了依赖的安装和更新，减少了重复文件的存储，同时提供了离线模式和安全特性，如校验和验证，适用于大型项目和企业级应用。

vite

 Vite是一种现代化的前端构建工具，以其快速的开发服务器和按需编译能力著称。它利用浏览器原生ES模块支持，实现近乎瞬时的冷启动和模块热更新，极大提升开发效率。Vite简化了构建流程，适用于构建高性能的Web应用，特别是在Vue.js项目中展现出色的性能。

vue

 Vue.js 是一款渐进式的JavaScript框架，专注于构建用户界面。它以易学易用、灵活的API和高效的虚拟DOM更新机制著称，支持组件化开发，可以无缝集成到现有项目中。Vue具备声明式渲染、响应式系统和强大的生态系统，适合开发单页应用和复杂的交互式界面。

vue-router

 Vue Router 是 Vue.js 官方的路由管理器，它深度集成了 Vue 的功能，用于构建单页应用。Vue Router 支持嵌套路由、导航守卫、过渡动画等功能，可以轻松管理应用的多个视图和状态，实现流畅的用户体验和优雅的页面切换，是构建复杂 SPA（单页应用）的重要工具。