《Vue 3基础入门》课件 第一章 vue 3简介

Vue3简介Contents目录Web前端框架01认识Vue302选择IDE0304050607配置Node.js环境安装Vue3熟悉vue-devtools调试工具本章小结01Web前端框架PART前端框架的诞生在第一次浏览器战争中，Netscape被微软击败后创办了Mozilla技术社区。该社区推出了符合W3C标准的Firefox浏览器，它和Opera浏览器一起代表了W3C阵营，并与IE浏览器开始了第二次浏览器战争。不同的浏览器技术标准之间存在较大的差异，这给开发带来了兼容性问题。为了解决这个问题，出现了一些前端兼容框架，如Dojo、Mooltools、YUI、ExtJS和jQuery等，其中jQuery的应用范围最为广泛。近年来各大浏览器开始支持HTML5，前端实现的交互功能随之增加，相应的代码复杂度显著提高，用于后端的MVC模式开始应用于Web前端开发。从2010年10月出现的Backbone开始，Knockout、Angular、Ember、React、Vue等框架相继出现。这些框架的应用使WebSite从WebSite进化成WebApp，并开启了WebApp的SPA（SinglePageApplication，单页面应用）时代。MVC模式典型的MVC模式：MVC模式使用MVC模式设计和创建Web前端应用时，通常将程序分为以下3个部分：1）Model用于表示应用程序的核心数据部分。2）View用于展示效果、生成HTML页面等。3）Controller用于处理输入，如业务逻辑等。MVC模式MVC模式的优点主要有以下三个1）松耦合性2）高重用性3）低生命周期成本从MVC到MVVMMVP模式是从MVC模式演变而来的，其基本思想与MVC模式相似ViewPresenterModelMVP模式从MVC到MVVMMVVM模式将MVP模式的View的状态和行为抽象化，并将视图UI和业务逻辑分离02认识Vue3PART什么是Vue3Vue3是一个基于MVVM模式的用于构建用户界面的渐进式JavaScript框架，可以根据项目的复杂度和需求灵活地选择不同的层次和功能对于简单的系统，可以采用Vue3的声明式渲染机制；对于复杂的系统，可以方便地接入Vue3组件系统、Vue-router前端路由和Vuex状态管理等功能，实现前后端分离项目或者多组件状态共享的需求Vue3提供的构建系统可以帮助开发者快速地构建一个脚手架项目，并提供了运行环境和打包工具等功能，方便开发、调试和构建发布版本。渐进式框架的分层结构什么是Vue3Vue3的改进可总结为以下8点：1、全面提高了性能2、编译体积更小3、CompositionAPI4、组件多节点支持5、更灵活的组件渲染6、更先进的组件7、更好地支持TypeScript8、支持自定义渲染APIVue3的优势相对于其他Web前端框架，Vue3主要有以下5个优势。1、体积较小，压缩后只有33KB。2、基于虚拟DOM技术，通过预先进行各种计算来优化DOM对象的操作，避免直接操作DOM对象，具有更高的运行效率。3、支持双向数据绑定，使开发人员无须直接操作DOM对象，可以将更多精力投入到业务逻辑上。4、生态丰富，具有较低学习成本，市场上存在许多成熟稳定的基于Vue3的UI框架和组件，可快速实现开发。5、对于初学者友好，易于入门，并提供大量学习资料03选择IDEPART选择IDE对于开发者而言，优秀的IDE(

Integrated

DevelopmentEnvironment，集成开发环境)可以极大地提高开发效率，VSCode（VisualStudioCode）是微软推出的一款轻量级代码编辑器，它免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性及插件扩展，并针对网页开发和云端应用开发做了优化，软件跨平台支持Windows、macOS及Linux。04配置Node.jsPART配置Node.js环境打开Node.js官网/，找到Node.js下载页面，如图所示。配置Node.js环境根据系统版本下载相应的Node.js安装包，双击下载文件会出现如图所示的安装页面，按照提示选项完成Node.js的安装。配置Node.js环境除了上述方法外，macOS用户也可以使用Homebrew进行Node.js的安装。安装Homebrew后，在控制台执行brewinstallnode@14就可以方便地安装Node.js14，如图所示。配置Node.js环境执行node-v指令和npm-v指令可以查看node版本和npm版本。05安装Vue3PART独立安装版本独立版本安装需要以下两个步骤，本质是将编译好的Vue3的JavaScript脚本下载到本地，和现有项目一起部署在服务器上，并在页面中引用。1、下载Vue3。可以在Vue3的官网上下载最新版本。/vue@3.2.31/dist/vue.global.js。2、引入Vue3。在HTML文件中用标签<script>引入Vue3文件。CDN方式安装Vue3给出了一个推荐的CDN链接，在页面中使用<script>标签引入，<scriptsrc="/vue@next"></script>对于生产环境，推荐连接一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏<scriptsrc="/vue@3.2.31/dist/vue.global.js"></script>如果使用原生ESModule，可以导入一个兼容ESModule的构建文件<scripttype="module">importVuefrom'/npm/vue@3.2.31/dist/d.js'</script>npm方式安装安装Vue3#最新稳定版$npminstallvue@next更新Vue3#最新稳定版$npmupdatevue@next卸载Vue3#最新稳定版$npmuninstallvue@next有时访问npm源速度会很慢，建议使用淘宝npm镜像。更改npm镜像源使用以下命令$npminstall-gcnpm–registry=然后可以使用cnpm来安装模块$cnpminstallvue@next使用前端脚手架安装前端脚手架指通过选择几个选项快速搭建项目基础代码的工具。常见的Vue3脚手架有VueCLI和Vite，第9章会详细讲解。前端脚手架会在初始化的时候自动地帮助开发者安装好Vue3。06熟悉vue-devtools调试工具PART熟悉vue-devtools调试工具vue-devtools是一款基于Chrome浏览器的插件，它用于调试Vue3应用，可以极大地提高调试效率。vue-devtools的安装方式有以下两种。1.从Chrome商店中安装vue-devtools可以从Chrome商店中直接下载安装。2.手动安装（1）在命令行中执行gitclone/vuejs/vue-devtools.git命令，将Github项目

克隆到本地（2）在命令行中执行npminstall命令，安装项目所需的npm包。（3）在命令行中