创建vue项目+安装路由

本项目是基于windows系统下的node.js v18.19.0创建

1、创建Vite的vue项目；

（1）打开终端运行命令安装pnpm，然后进入自己的工作空间，使用pnpm创建一个自己的项目：

npm install -g pnpm
//安装pnpm
pnpm create vite myproject --template vue
//创建项目

pnpm的官方网站，可以根据不同的系统和版本安装：pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm中文文档 | pnpm中文网

（2） 创建完成后进入项目所在的目录，进行环境配置：

cd myproject			
//进入项目目录，必须进入，否则安装错误，无法后续执行
pnpm install			
//安装第三方支持文件，会创建node_modules，这个下面的东西不要擅自修改，修改后可能就破坏环境，代码无法执行。

（3） 运行项目：

pnpm run dev

复制以上网址到浏览器打开就可以访问本地的开发服务器。

2、安装所需的工具VueRouter；

 （1）先关掉本地服务器回到项目目录，安装Vue Router：

pnpm add vue-router@4

安装后在项目目录下会增加一个文件夹：

3、相关的代码；

设置路由：

（1）在src目录下新建一个目录，用于存放vue文件，然后创建Home.vue和About.vue：

（2）配置路由：

• index.js：在src文件夹内创建一个名为router的文件夹，并在里面创建一个index.js文件。

import { createWebHashHistory, createRouter } from 'vue-router'
/*
这里从 vue-router 库中导入了两个函数：
createWebHashHistory()：这个函数用于创建一个使用 URL hash (#) 来管理路由的历史记录对象。hash 模式不需要服务器支持，所有页面请求都会被重定向到同一个 index.html 页面，然后由前端来解析 hash 并渲染相应的组件。
createRouter()：这个函数用于创建一个 Vue Router 实例，它接受一个配置对象作为参数。
*/
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
/*
这里导入了两个 Vue 组件，它们分别是首页和关于页面，Home和About是别名，
"~/Home.vue" 和 "~/About.vue"是路径。
*/
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
/*
这是一个路由规则数组，每个对象描述了一条路由。每个路由对象有至少两个属性：
path：URL 路径，例如 '/' 表示根路径，'/about' 表示关于页面的路径。
component：与该路径对应的 Vue 组件，当访问该路径时，会显示这个组件。
*/
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
/*
这里调用了 createRouter 函数，传入一个配置对象：
history：指定了路由的历史模式，这里是 createWebHashHistory() 创建的 hash 模式历史记录。
routes：上面定义的路由规则数组。
*/
export default router
/*将创建好的路由器实例作为模块的默认导出，这样其他部分的代码就可以通过 import 语句来使用这个路由器了。*/

• main.js：在整个项目中使用路由，在main.js中注册 

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router/index.js'
//导入了 Vue Router 的实例，该实例在 ./router/index.js 文件中。
const app=createApp(App)
app.use(router)
app.mount('#app')
/*
createApp(App)：这里创建了一个 Vue 应用实例，传入 App 作为根组件。
app.use(router)：将 Vue Router 插件注入到 Vue 应用实例中。
app.mount('#app')：将 Vue 应用实例挂载到 HTML 文档中的一个元素上，是 ID 为 app 的元素（对应为myproject/index.html中的<div id="app"></div>）。
*/

•  App.vue：设定RouterView

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于我们</router-link>
  <router-view></router-view>
</template>

4、vite项目的结构和加载的原理；

 Vite 的项目结构：

Vite 是一个由 Evan You 创建的现代化前端构建工具，其设计目标是提供更快的开发体验，尤其是在启动和热更新方面。通常如下所示： 

• public/：存放静态资源文件，如 `index.html`、图标、字体等。Vite 会自动复制此目录下的所有文件到输出目录。  
• src/：存放应用的主要源代码，包括 Vue 组件、JS、CSS、图片等。
• main.js：通常作为应用的入口文件，用来初始化和挂载 Vue 应用。
• vite.config.js：Vite 的配置文件，用于定制构建行为，如指定输入输出目录、服务器配置等。

加载原理：

Vite 在开发模式下使用了浏览器原生的 ES 模块加载机制，这与传统构建工具的打包方式有很大区别：

• 模块热替换 (Hot Module Replacement, HMR)：Vite 利用浏览器的模块热替换能力，当文件更改时，仅重新加载受影响的部分，而不是整个页面，从而实现几乎即时的代码变更反馈。
• 按需编译：在开发环境中，Vite 不预先编译所有模块，而是当浏览器请求特定模块时才进行编译。这意味着开发服务器可以立即启动，而不需要等待整个项目编译完成。
• 代理和虚拟模块：Vite 使用代理来处理模块请求，它将 `.vue` 文件转换为 JavaScript 模块，同时保留模块的原始 URL。这允许浏览器直接请求 `.vue` 文件，而 Vite 在幕后进行转换和优化。
• 优化的构建过程：在生产模式下，Vite 会进行完整的模块打包和优化，包括代码分割、压缩、内联等，生成适合部署的静态资源。

这种加载原理使得 Vite 能够提供非常快的开发体验，特别是在大型项目中，因为开发者可以立即看到更改的效果，而无需等待长时间的打包过程。此外，Vite 的按需编译和模块热替换机制也极大地提高了开发效率。

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

1.Node.js: 一个开源的、跨平台的JavaScript运行环境，用于开发服务器端和网络应用。Node.js使用事件驱动、非阻塞I/O模型，使其轻量又高效，非常适合数据密集型实时应用。

2.npm (Node Package Manager): Node.js的默认包管理器，用于安装、管理和发布Node.js程序的模块和库。npm提供了庞大的软件注册表，允许开发者分享和重用代码。

3.pnpm: 一个高性能的、内存高效的包管理器，旨在解决npm的一些性能问题，如重复依赖项安装。pnpm通过链接共享依赖项到全局存储，减少磁盘空间占用和提高安装速度。

4.Vite: 一款由Vue.js作者尤雨溪创建的现代前端构建工具，专注于提供快速的冷启动和热更新体验。Vite在开发模式下利用浏览器原生ES模块加载，无需打包，大大提升了开发效率。

5.Vue.js: 一种用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，易于上手，同时又灵活，可以被逐步采用。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

6.Vue Router: Vue.js官方的路由管理器，用于构建单页应用。Vue Router支持嵌套路由、导航守卫、历史记录管理等功能，使得在SPA中管理复杂的导航逻辑变得简单。