Vue初识
目录
6、总结所用的技术，每个技术点50~100字：nodejs/npm/pnpm/vite/vue/vuerouter
1、熟练创建Vite的vue项目
1）制定项目的目录
首先创建一个Vue项目，名字可以自己定。
pnpm create vite kfc001 --template vue2）完成环境配置和启动服务
进入项目目录，安装第三方支持文件，会创建node_modules，这个下面的东西不要擅自修改，容易破坏环境，使代码无法执行。
//进入项目目录 cd kfc527 //安装第三方支持文件 pnpm install //启动服务 pnpm run dev
2、熟练安装所需的工具VueRouter
1）VueRouter
进入这个链接，打开页面后，在安装里面会有具体的安装命令。
pnpm add vue-router@4在终端输入命令，进行安装，会在Hbuilderx的package.json文件里看到"vue-router": "4"，说明安装成功。
2)Element Plus
进入这个网站，在指南中，会有详细的安装命令，安装后，使页面更加丰富。
pnpm install element-plus在终端输入命令，进行安装，会在Hbuilderx的package.json文件里看到"element-plus": "^2.7.7"，说明安装成功。
3、Vite的vue项目加入路由
1)创建Home.vue，创建About.vue
2)创建路由：router/index.js文件中，声明路由表（注册所有vue文件）
1. 首先创建好各种文件，如下图所示：
2. 然后在router/index.js文件中，声明路由表：
3)修改App.vue，设定RouterViewimport { 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 router4)在整个项目中使用路由，在main.js中注册，最后的结果如图<template> <router-link to="/">首页 </router-link> <router-link to="/about">关于我们</router-link> <router-view></router-view> </template>import { createApp } from 'vue' import './style.css' import App from './App.vue' // 引入路由的index.js,导入一个js文件 import router from './router/index.js' const app = createApp(App) app.use(router) app.mount('#app')
4、美化页面，首页、关于我们
可以在首页和关于我们里面加一些具体的KFC页面，我在首页里加了我之前写好的KFC提交订单页面。
5、论述vite项目的结构和加载的原理
1)Vite项目结构
Vite项目的基本结构通常包括：
src目录：存放应用的主要源代码，通常有main.js作为入口文件。public目录：存放静态资源，如HTML模板、图片、字体等。vite.config.js：Vite的配置文件，用于定制构建行为和插件设置。.env文件：用于存储环境变量，Vite会在构建过程中读取并注入这些变量。2)Vite加载原理
Vite的加载机制基于现代浏览器对ES模块（ESM）的支持，主要特点如下：
即时编译与热更新：Vite在开发模式下实时监听文件变化，使用ES模块的动态导入特性，实现模块的即时编译和热更新（HMR），无需刷新页面即可看到代码变更效果。
按需加载：Vite利用浏览器的模块加载机制，根据代码中的
import语句动态加载模块，实现代码的按需加载，提高加载效率。模块转换与优化：在生产构建中，Vite会将项目中的所有模块打包成浏览器可以理解的格式，同时进行代码分割、压缩、树摇等优化，以减小最终包体积。
服务端处理：Vite启动一个轻量级的开发服务器，该服务器负责处理模块的动态加载和HMR，确保开发过程的流畅性和高效性。
通过以上机制，Vite能够提供快速的开发体验和高效的构建流程，特别适合现代Web应用的开发。
6、总结所用的技术，每个技术点50~100字：nodejs/npm/pnpm/vite/vue/vuerouter
1）Node.js
Node.js是一种开源运行环境，基于Chrome V8 JavaScript引擎，使JavaScript能够在服务器端运行。它采用事件驱动、非阻塞I/O模型，非常适合构建高性能、高并发的网络应用。Node.js支持模块化编程，具有庞大的生态系统。
2）npm
npm是随同Node.js一起安装的包管理器，用于管理和分发Node.js程序的依赖包。开发者可以使用npm命令来安装、更新、卸载软件包，以及创建、发布和管理自己的包。npm是全球最大的开源库生态系统之一。
3）pnpm
pnpm是另一种Node.js包管理器，相比于npm和Yarn，它使用硬链接和符号链接来避免重复的包安装，节省磁盘空间和提高性能。pnpm在多项目中共享依赖，加快安装速度，适合大型项目或企业级开发环境。
4）Vite
Vite是一个现代的前端构建工具，专注于提供快速的开发体验。它利用ES模块的原生支持，在开发环境中直接从源代码提供模块，实现近乎瞬时的冷启动和模块热更新（HMR），适用于构建大型Web应用。
5）Vue
Vue.js是一种用于构建用户界面的渐进式框架。它专注于视图层，易于上手且可与其他库或已有项目整合。Vue的核心库只关注视图层，易于学习，灵活性高，通过组合简单的组件可以构建复杂的前端应用。
6）Vue Router
Vue Router是Vue.js官方的路由管理器，用于构建SPA（单页应用）。它允许开发者定义不同的路由规则，将URL映射到特定的组件，并提供导航守卫、嵌套路由等功能，使得在复杂应用中管理页面跳转变得简单高效。
原文地址：https://blog.csdn.net/m0_63186875/article/details/140521861
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！