1、熟练创建Vite的vue项目；

 概念：Vite 是一个前端构建工具Vite 可以跳过传统的打包步骤，直接在浏览器中运行未经处理的源代码，减少了开发服务器的启动时间和代码更改后的等待时间，Vue 提供了一个声明式的、组件化的架构，使得开发者可以构建可复用的 UI 组件和复杂的单页应用。

使用：在终端中安装pnpm命令：npm install -g pnpm

查询版本：pnpm -v

使用pnpm：pnpm create vite kfc527 --template vue

然后在文件路径中打开并运行：

cd kfc527

pnpm install

pnpm run dev

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

在终端中安装路由路径：pnpm add vue-router@4，然后HBulider的项目中创建一个名为 router 的文件夹，并在其中创建一个名为 index.js 的文件然后导入：

import { createWebHashHistory, createRouter } from 'vue-router'

// 注册自定义的vue文件

import Home from '../pages/Home.vue'

import About from '../pages/About.vue'

// 路由表

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About },

]

// 创建路由对象

const router = createRouter({

  history: createWebHashHistory(),

  routes,

})

//声明：导出

export default router

然后在main.js中导入并使用 Vue Router：

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

3、美化页面，首页、关于我们；

美化代码：

<template>

  <div id="app">

    <nav class="navbar">

      <router-link to="/" class="nav-link"><i class="fas fa-home"></i> 首页</router-link>

      <router-link to="/about" class="nav-link"><i class="fas fa-info-circle"></i> 关于我们</router-link>

    </nav>

    <router-view></router-view>

  </div>

</template>

<style>

    /* styles.css */

    body { -- -->

      font-family: 'Roboto', sans-serif;

      margin: 0;

      padding: 0;

      background: linear-gradient(135deg, #e66465, #9198e5);

      color: white;

    }

    #app {

      max-width: 1200px;

      margin: 0 auto;

      padding: 20px;

    }

    .navbar {

      display: flex;

      justify-content: space-around;

      align-items: center;

      background: rgba(255, 255, 255, 0.1);

      backdrop-filter: blur(5px);

      padding: 10px 20px;

      border-radius: 5px;

      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

    }

    .nav-link {

      color: white;

      text-decoration: none;

      padding: 5px 10px;

      display: flex;

      align-items: center;

      transition: all 0.3s ease;

    }

    .nav-link i {

      margin-right: 5px;

    }

    .nav-link:hover {

      background: rgba(255, 255, 255, 0.2);

      border-radius: 5px;

      transform: translateY(-2px);

    }

    /* Font Awesome icons */

    @import url('https://fonts.googleapis.com/css?family=Roboto');

    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

</style> 

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

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

创建Home.vue，创建About.vue创建路由：router/index.js文件中，声明路由表（注册所有vue文件）修改App.vue，设定RouterView在整个项目中使用路由，在main.js中注册

### Node.js

Node.js 是一个开源的跨平台JavaScript运行环境，允许开发者使用JavaScript语言编写服务器端代码。它基于Chrome V8引擎，能高效执行异步I/O操作，特别适合构建高性能网络应用，如实时通信、微服务架构等。

### npm (Node Package Manager)

npm 是随同Node.js一起安装的包管理工具，用于管理和安装Node.js的第三方库和程序包。npm 提供了一个全球最大的开源库生态系统，开发者可以轻松搜索、安装和发布软件包，简化了项目依赖管理。

### pnpm

pnpm 是一个高性能的包管理器，它提供了一个虚拟链接系统，使得不同项目共享相同的模块实例，从而节省磁盘空间和加载时间。pnpm 也支持并行安装和更新，显著提升了开发效率。

### Vite

Vite 是一个现代前端构建工具，由Vue团队开发，专注于提供快速的开发体验。它利用浏览器的原生ESM支持，在开发模式下直接服务源代码，无需长时间编译。Vite 提供了热模块替换和按需编译，非常适合构建大型应用。

### Vue.js

Vue.js 是一个用于构建用户界面的渐进式框架，强调可组合的组件系统。它拥有简洁的API和低学习曲线，适合构建单页面应用和复杂的UI。Vue.js 支持双向数据绑定、组件化开发、状态管理和路由管理，广泛应用于Web开发。

### Vue Router

Vue Router 是Vue.js的官方路由管理器，用于构建单页面应用中的导航和视图切换。它提供了一种声明式的方式定义路由规则，支持嵌套路由、导航守卫、参数传递等功能，使开发者能够轻松管理应用的路由逻辑。