Vue 0718

1、熟练创建Vite的vue项目

1.1 创建目录，存放vue项目

1.2在命令提示符窗口切换路径到刚才为vue项目创建的目录下

1.3 输入命令创建vue项目

pnpm create vite 'v给ue项目的命名' --template vue

可在刚才的目录下找到KFC527文件夹

2、熟练安装所需的工具VueRouter

2.1 找到VueRouter中的安装命令

点击“入门”

找到“安装”中的pnpm的安装命令

2.2 在命令提示符中执行命令

必须在刚才创建vue项目的路径中

2.3 看是否成功

在KFC527项目中的node_modules文件夹下会有vue_router的文件夹，及代表成功。

或者：

在KFC527项目中的package.json中的"dependencies": { },会有    "vue-router": "^4.4.0"，及代表VueRouter安装成功。

3、自己再做一遍，自己写出相关的代码

在KFC527项目中的src文件夹下新建两个文件夹：pages和router

在pages中新建两个vue文件：Leader.vue和New.vue

Leader.vue:

<template>
	<p>
		Sabir Sami 于 2022 年 1 月成为肯德基部门的首席执行官，并直接向百胜汇报！品牌首席执行官。
	在这个职位上，Sami负责推动肯德基的品牌战略和绩效。
	</p>
</template>

<script>
</script>

<style>
</style>

New.vue:

<template>
	<p>人气套餐随心配</p>
</template>

<script>
</script>

<style>
</style>

在router中新建一个js文件：insexs.js

insexs.js:

import { createWebHashHistory, createRouter } from 'vue-router'
// createWebHashHistory用于创建一个基于URL的hash模式的历史记录对象，
// 这意味着你的路由将会带有#号（例如http://example.com/#/about）
// createRouter则是用来创建router实例的函数


// 注册自定义的vue文件
import Leader from '../pages/Leader.vue'
import New from '../pages/New.vue'

// 路由表
const routes = [
  { path: '/leader', component: Leader },
  { path: '/new', component: New },
]
// routes数组定义了应用的路由规则。每个路由规则都是一个对象，包含path和component两个属性。
// path指定了URL路径，
// 而component则指定了当URL匹配该路径时应该渲染的Vue组件。

// 创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})


//声明：导出
export default router

配置App.vue:

<template>
	<router-link to="/leader">领导人</router-link>&nbsp;
	<router-link to="/new">新品</router-link>
	<!-- <router-link to="/">首页</router-link>：这是一个路由链接组件，用于创建导航链接。
	to属性指定了链接的目标地址，这里是根路径/，代表应用的首页。点击这个链接时，会触发路由跳转，但不会重新加载页面，
	而是会在当前的Vue应用中更新<router-view>组件显示的内容。 -->
	
	<router-view></router-view>
	<!-- 是一个路由视图组件，用于渲染匹配到的路由组件。
	当路由发生变化时，<router-view>会自动渲染对应路由组件的内容。
	当前路由是/，那么它会渲染首页组件的内容；
	路由是/about，则会渲染“关于我们”页面的内容 -->
</template>

配置main.js:

import { createApp } from 'vue'
/*从vue中挑出createApp函数*/
import './style.css'
/*同一级的style.css*/
/*.当前目录，..上一级目录，\从根目录开始*/
import App from './App.vue'

// 从./router/index.js文件中导入了路由配置
import router from './router/indexs.js'

const app =createApp(App)
// 使用createApp函数并传入App.vue组件来创建一个新的Vue应用实例
app.use(router)
app.mount('#app')

结果：

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

About.vue:

<template>
	<div class="container">
		<img src="../../public/fw.webp"/>
		<h3>
			我们的服务价值观
		</h3>
	</div>
		<p>
			在肯德基，我们对食物充满热情，并以此为荣。
		我们相信，您应该以最好的自己来工作，并像对待朋友一样对待每一位客人。
		我们的工作是确保每位客人都满意地离开。
		</p>
	
</template>

<script>
</script>

<style>
	.container {
	      display: flex;
	      align-items: center; /* 垂直居中对齐 */
	    }
		.container img{
			widows: 50px;
			height: 50px;
			margin-right: 15px;
		}
</style>

Home.vue:

<template>
	<div class="pro">
		<img src="../../public/sy.webp"/>
	</div>
</template>

<script>
</script>

<style>
	.pro{
		width: 100%;
		height: 100%;
	}
	.pro img{
		width: 1250px;
		height: 700px;
	}
	.col{
		color: red;
	}
</style>

结果：

5、论述vite项目的结构和加载的原理

  5.1 Vite 项目结构

        5.1.1 src - 主要的源代码目录，通常包含：

         main.js - 项目的入口文件。

   App.vue - 应用的根组件。

   components - 存放 Vue 组件的目录。

   views - 如果使用了路由，存放各个视图组件的目录。

   assets - 静态资源，如图片、字体等。

   styles 或 scss - CSS 或 SCSS 文件。

        5.1.2 public

        公共静态资源目录，放置不会经过 Vite 处理的文件，如 HTML 模板、CNAME 文件等。

        5.1.3 index.html

         应用的 HTML 入口文件。

        5.1.4 vite.config.js 

        Vite 的配置文件，可以在这里配置服务器选项、插件、别名等。

        5.1.5package.json

        包管理配置文件，包含项目依赖、脚本等。

5.2 Vite 加载原理

5.2.1 无打包启动（No Bundle）

Vite 在开发环境中采用了一种称为“无打包”的方式启动项目。与传统的如 Webpack 需要预先打包整个应用不同，Vite 仅在服务器启动时对依赖进行预构建，而业务代码则保持原样。这意味着在开发时，浏览器直接请求并加载原始的模块文件，利用浏览器对 ES 模块的原生支持。

5.2.2 服务器端模块打包（Server-Side Module Bundling, SSMB）

Vite 使用一个基于 Koa 的开发服务器，这个服务器拦截浏览器对 ESM 模块的请求。当浏览器请求一个模块时，服务器动态地转换该模块，比如将 .vue 文件转换为 JavaScript，并添加必要的模块导入导出语法，然后返回给浏览器。这一步骤包括：

• 依赖分析：确定模块间的依赖关系。
• 模块转换：使用如 @vue/compiler-sfc 转换 .vue 文件。
• ESM 返回：将处理后的模块作为 ESM 返回给浏览器。

5.2.3  即时模块热重载（Hot Module Replacement, HMR）

Vite 利用 WebSocket 实现了即时的模块热重载。当开发者修改代码后，服务器通过 WebSocket 向浏览器发送更新通知，浏览器接收到通知后只重新加载变更的模块，而不是整个页面，大大提升了开发效率。

5.2.4 按需加载与浏览器缓存

Vite 利用浏览器对 ESM 的支持实现真正的按需加载，即只有当模块首次被引用时才会加载。此外，它还利用浏览器缓存策略，使得重复的模块请求可以直接从缓存中读取，进一步加快加载速度。

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

6.1 nodejs

Node.js是一个免费、开源、跨平台的 JavaScript 运行时环境，它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。

单线程但高度可扩展：Node.js主要运行在单个线程上，但通过事件循环和非阻塞I/O实现了高并发处理能力。对于CPU密集型任务，Node.js可以通过子进程或者Worker线程来实现多线程处理。

6.2 npm

npm是JavaScript和Node.js生态系统的包管理和分发工具

包注册中心：npm连接到全球最大的软件注册表，这是一个集中存储JavaScript包及其元数据的地方，允许开发者发布和发现开源软件包。

依赖管理：npm能够自动管理项目的依赖关系，通过package.json文件记录所有依赖包及其版本信息，解决了包之间的依赖冲突问题，并且支持版本锁定，确保项目的可复现性。

6.3 pnpm

快速、节省磁盘空间的包管理器

快

pnpm 比 npm 快 2 倍

有效

node_modules 中的文件是从单个内容可寻址存储克隆或硬链接的

支持 monorepos

pnpm 内置了对存储库中多个包的支持

严格

默认情况下，pnpm 会创建一个非平面node_modules，因此代码无法访问任意包

6.4 vite

vite以其独特的技术和设计理念，显著提升了前端开发的效率和体验

极速的服务启动

使用原生 ESM 文件，无需打包!

轻量快速的热重载

无论应用程序大小如何，都始终极快的模块热重载（HMR）

丰富的功能

对 TypeScript、JSX、CSS 等支持开箱即用。

优化的构建

可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

通用的插件

在开发和构建之间共享 Rollup-superset 插件接口。

完全类型化的API

灵活的 API 和完整 TypeScript 类型。

6.5 vue

vue：渐进式JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。

易学易用

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

性能出色

经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

灵活多变

丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

6.6 vuerouter

Vue Router：Vue.js 的官方路由，为 Vue.js 提供富有表现力、可配置的、方便的路由

 富有表现力的路由语法

用直观且强大的语法来定义静态或动态路由。

细致的导航控制

可拦截任何导航并更精确地控制其结果。

 基于组件的配置方法

将每条路由映射到应该显示的组件上。

支持历史模式

有 HTML5、hash 或记忆历史模式可供选择。

支持滚动控制

可精确控制每个页面的滚动位置。

支持自动编码

可直接在代码中使用 unicode 字符。