Vue.js前端开发案例教程vue.js前端开发案例教程 (项目一).pptx

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

项目一Vue.js入门

能够搭建Vue.js的开发环境

能够创建并运行Vue.js项目技能目标02保持积极的学习态度，增强独立学习的能力

努力强化自己的合作意识和共享精神素养目标03熟悉Vue.js的定义、特性和开发模式了解Vue.js的开发环境

掌握Vue.js项目的创建方式和运行方式

熟悉Vue.js项目的目录结构和运行过程知识目标01项目目标

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

0102项目描述综合考虑各方面因素后，小刘决定使用Vue.js开发订餐系统的前端，于是开始搭建Vue.js的开发环境，并创建订餐系统项目。

01?02?搭建Vue.js开发环境安装VisualStudioCode编辑器、Node.js、包管理工具和浏览器创建订餐系统项目使用yarn或npm包管理工具搭配项目构建工具Vite来完成项目分析

1.简述前端技术的发展历程。2.你用过哪些前端框架？问题项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“前端技术的发展”视频，讨论并回答下列问题。

01初识Vue.jsVue.js项目项目考核项目实ue.js的开发环境项目实施项目评价项目总结040608项目导航

定义初识Vue.jsVue.js是一个专注于视图层的渐进式前端框架，采用自底向上和增量开发模式，提升项目的可维护性和可测试性。它基于HTML、CSS、JavaScript，通过声明式组件化编程，将网页分解为可复用的独立组件，每个组件封装了自己的视图、样式和逻辑，促进高效UI开发。

特性初识Vue.js（1）轻量级。（3）指令。（2）双向数据绑定。（4）组件化管理。（5）插件化开发。Vue.js比Angular和React更轻量级，文件体积小，加载速度快。Vue.js让数据与视图实时联动，无需手动同步，开发更快捷，效率倍增。指令（v-前缀）动态更新HTML元素状态。Vue.js组件化，代码模块化，易维护扩展。Vue.js内核轻量，插件丰富，功能可扩展。

开发模式初识Vue.jsVue.js是采用Model-View-ViewModel（简称MVVM）模式进行前端开发的。主要目的：分离视图和模型主要优点低耦合可重用可独立开发可测试

初识Vue.js开发模式（MVVM）模型：由核心的业务逻辑产生的数据对象。视图：用户在显示器上看到的结构、布局和外观，即用户界面，主要由HTML和CSS构建。视图模型：主要功能是实现数据双向绑定。MVVM模式3个核心部分：Model（模型）、View（视图）、ViewModel（视图模型）

定义：由微软开发的一款免费、开源、跨平台、非常适合前端开发的代码编辑器，且同时支持Windows、MacOS、Linux等操作系统

功能：Git版本控制、代码补全、语法检查、代码高亮等Vue.js的开发环境VisualStudioCode编辑器优点：通过安装扩展，VSCode编辑器几乎可以支持目前所有流行的编程语言

定义：一个基于ChromeV8引擎的JavaScript运行环境，用于构建高性能、可扩展的网络应用程序

特性：异步、事件驱动、非阻塞I/O模型适合处理高并发请求和构建实时应用程序Vue.js的开发环境Node.js环境应用领域：Web应用开发、实时通信、数据管理和微服务等

Vue.js的开发环境包可以理解为包含一系列模块化代码的文件夹在?Vue.js?项目开发中，经常需要安装各种第三方的包（package）来扩展项目的功能包管理工具用于管理第三方的包可以帮助开发人员轻松地安装、更新和卸载包

Vue.js的开发环境常见包管理工具特点操作命令补充说明?NodePackageManager（简称?npm）?Node.js?默认的包管理工具整个?Node.js?社区最流行、支持第三方包最多的包管理工具Node.js已经集成了npm，只要安装了Node.js，就可以使用npm安装指定名称的包命令格式：npm·install·包名·-g简写格式：npm·i·包名·-g（1）使用该命令安装的包称为全局包，任何项目都可以使用。（2）若省略“-g”，则安装的包称为项目包，只有安装了该包的项目可以使用。（3）若省略“包名”，则会根据当前目录文件中保存的包信息为项目安装所有的包。卸载指定名称的包命令格式：npm·uninstall·包名更新指定名称的包命