目录
1、熟练创建Vite的vue项目
2、熟练安装所需的工具VueRouter
1)VueRouter
2)Element Plus
3、Vite的vue项目加入路由
4、美化页面,首页、关于我们
5、论述vite项目的结构和加载的原理
1)Vite项目结构
2)Vite加载原理
6、总结所用的技术,每个技术点50~100字:nodejs/npm/pnpm/vite/vue/vuerouter
1)Node.js
2)npm
3)pnpm
4)Vite
5)Vue
6)Vue Route
1、熟练创建Vite的vue项目
1)制定项目的目录
首先创建一个Vue项目,名字可以自己定。
pnpm create vite kfc001 --template vue
2)完成环境配置和启动服务
进入项目目录,安装第三方支持文件,会创建node_modules,这个下面的东西不要擅自修改,容易破坏环境,使代码无法执行。
//进入项目目录 cd kfc527 //安装第三方支持文件 pnpm install //启动服务 pnpm run dev
2、熟练安装所需的工具VueRouter
1)VueRouter
进入这个链接,打开页面后,在安装里面会有具体的安装命令。
安装 | Vue Router
pnpm add vue-router@4
在终端输入命令,进行安装,会在Hbuilderx的package.json文件里看到"vue-router": "4",说明安装成功。
2)Element Plus
进入这个网站,在指南中,会有详细的安装命令,安装后,使页面更加丰富。
一个 Vue 3 UI 框架 | 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 router
4)在整个项目中使用路由,在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映射到特定的组件,并提供导航守卫、嵌套路由等功能,使得在复杂应用中管理页面跳转变得简单高效。