vue初体验

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

开始 | Vite 官方中文文档 (vitejs.cn)

pnpm create vite my-vue-app --template vue

• pnpm: 这是一个高性能的包管理器，它提供了比 npm 更快的安装速度和更小的磁盘占用。
• create vite: 这是 pnpm 的一个命令，用于调用 Vite 的项目创建脚手架。
• my-vue-app: 这是你新项目的名称。Vite 将会在当前目录下创建一个名为 my-vue-app 的文件夹，并在里面生成项目结构。
• --template vue: 这个选项指定了要创建的项目模板类型。在这里，你选择了 Vue 模板，意味着生成的项目将包含 Vue.js 的默认配置和文件结构。
• 
• 

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

pnpm add vue-router@4

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

设置 Vue.js 应用中的路由

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

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

为了使 Vue Router 在你的应用中生效，你需要在主应用文件 main.js中导入并使用这个路由器实例 

import router from './router/index.js'

const app=createApp(App)
app.use(router)
app.mount('#app')

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

Vite 是一个由 Evan You 开发的下一代前端构建工具，它专注于提供更快的开发体验，尤其是在模块热更新（HMR）和构建速度方面。Vite 的设计哲学是尽可能地减少构建步骤，让开发者在开发过程中能够快速地看到修改效果，同时在生产环境中生成高效的静态资源。

Vite 项目的结构

Vite 项目的结构相对简单，通常包括以下几个主要部分：

1. src 目录：存放源代码，类似于其他构建工具的源目录。Vite 默认将此目录下的index.html作为入口文件。

2. public 目录：存放静态资源，如图片、字体文件等，这些文件会被直接复制到输出目录。

3. node_modules 目录：存放项目依赖的第三方包。

4. package.json：定义项目依赖和脚本。

5. .gitignore：告诉 Git 忽略哪些文件或目录。

6. vite.config.js 或 vite.config.ts：Vite 的配置文件，用于自定义构建行为，如插件、服务器配置等。

Vite 的加载原理

Vite 的加载原理主要基于以下几点：

1. 基于 ES 模块的加载：Vite 利用浏览器原生的 ES 模块加载机制，这使得它在开发环境下不需要打包就可以运行。当服务器接收到模块请求时，Vite 会动态地编译和转换代码，然后发送给浏览器。

2. 模块热更新 (HMR)：Vite 实现了高效且精确的 HMR，当代码发生改动时，只更新变动的部分，而不是整个页面的刷新，大大加快了开发迭代的速度。

3. 按需编译：Vite 只编译和转换实际请求的模块，而不是一开始就编译整个项目。这使得启动速度极快，特别是在大型项目中。

4. 预编译：在开发服务器启动时，Vite 会对一些常见的库进行预编译，减少后续的编译工作量。

5. 懒加载：Vite 支持动态导入 (import())，这意味着可以实现代码分割，只有在需要的时候才加载特定的代码块，从而减小初次加载的时间。

生产环境构建

在生产环境中，Vite 将执行以下操作：

• 执行代码分割，将代码分割成多个小文件，以实现更快的加载速度。
• 进行压缩和优化，包括去除无用代码、压缩 CSS 和 JavaScript、内联小的资源文件等。
• 生成一个静态网站，包括 HTML、CSS、JS 文件，可以部署到任何静态文件服务器上。

总之，Vite 的设计旨在提供快速的开发体验和高效的生产构建，通过利用现代 Web 技术和最佳实践，使前端开发变得更加高效和愉快。

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

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许在服务器端使用 JavaScript。它采用事件驱动、非阻塞 I/O 模型，轻量而高效，非常适合数据密集型实时应用，如聊天系统、游戏服务器等。

npm (Node Package Manager)

npm 是随 Node.js 一起提供的包管理器，用于管理和安装 Node.js 应用程序的依赖项。npm 提供了一个庞大的注册表，包含数百万个开源软件包，开发者可以通过简单的命令行指令来下载和管理这些软件包。

pnpm

pnpm 是一个高性能的包管理器，旨在解决 npm 和 yarn 在处理大型项目时的性能瓶颈。它通过使用硬链接和符号链接来减少磁盘空间的使用，以及并行化安装过程来提高速度，适用于大规模团队协作和企业级项目。

Vite

Vite 是一个现代化的前端构建工具，专注于提供快速的开发体验。它利用浏览器原生的 ES 模块加载机制，在开发环境中无需打包即可运行代码，并提供了高效的模块热更新 (HMR)。Vite 在生产环境中则生成高度优化的静态资源，提升应用性能。

Vue.js

Vue.js 是一个用于构建用户界面的渐进式框架。其核心库聚焦于视图层，易于上手，同时也非常灵活，可以与各种现有系统集成。Vue 提供了组件化模型和响应式数据绑定，使得开发者可以构建可维护和可扩展的单页应用。

Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用。它允许开发者定义路由规则，将 URL 映射到相应的组件，并处理导航和状态管理。Vue Router 支持嵌套路由、命名视图和动态参数，提供了强大的路由功能和良好的用户体验。