Vue.js 3.x前端开发技术与实战 课件 -第7章Vue开发环境与SFC新特性.pptx

第7章Vue开发环境与SFC新特性(6学时)教学目标熟悉VueCLI脚手架的安装与使用方法。掌握常用NPM包管理器命令。学会webpack安装和配置。学会VueCLI创建项目。掌握单文件组件的结构与新特性。掌握组合式API-依赖注入的使用方法。了解组合式API模板引用的方法。学会通过ref引用元素和组件。1

7.1.1Node.js简介简单地说Node.js就是运行在服务端的JavaScript。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，用于快捷地构建响应速度快、易于扩展的网络应用。它摒弃了传统平台依靠多线程来实现高并发的设计思路，采用了单线程、非阻塞IO、事件驱动式的程序设计模式。ChromeV8引擎执行JavaScript的速度非常快，性能非常好。非常适合在分布式设备上运行数据密集型的实时应用。Node.js内建了HTTP服务器，可以向用户提供服务。与PHP、Python、RubyonRails相比，它跳过了Apache、Nginx等HTTP服务器，直接面向前端开发。Node.js的许多设计理念与经典架构（如LAMP）有着很大的不同，可提供强大的伸缩能力。7.1部署Node.js

7.1.2Node.js部署可以从/zh-cn/网站上下载符合操作系统类型安装包。推荐多数用户使用长期支持版（LTS），本书选择64位的Windows安装包node-v16.14.2-x64.msi，完成安装。在命令行状态下输入node–v和npm–v查看安装的软件版本信息，如有版本信息提示，说明Node.js环境安装就绪。

7.2Node包管理器npmnpm(nodepackagemanager)是Node官方提供的包管理工具，是Node包的标准发布平台，专门用于Node包的发布、传播、依赖控制。npm提供了命令行工具，可以方便地下载、安装、升级、删除包，也可以作为开发者发布与维护包。npm是随同Node一起安装的包管理工具，解决了Node代码部署上的很多问题。经常使用在以下三种场景：（1）允许用户从npm服务器下载别人编写的第三方包到本地使用。（2）允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。（3）允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。npm由三个独立的部分组成：npm官方网站（仓库源）、注册表（registry）、命令行工具（CLI）。网站是开发者查找包（package）、设置参数以及管理NPM使用体验的主要途径；注册表是一个巨大的数据库，保存了每个包（package）的信息。CLI通过命令行或终端运行。开发者通过CLI与npm打交道。7.2.1npm简介

7.2.2npm常用命令1.查看帮助命令npmhelp或npmh2.查看模块信息命令（1）查看全局或项目下已安装的各模块之间的依赖关系图。npmlist/ls/la/ll[-g]list表示列出所有模块的依赖关系。ls、la、ll：是list的别名，功能类似。（2）查看模块安装路径npmroot[-g]（3）查看模块信息（名称、版本号、依赖关系、Repo等）命令npmview<name>[package.json属性名称]npmviewwebpackauthor(示例查看webpack的作者信息)name表示所需查找的模块名称。package.json属性名称：可以指定特定的属性，模块和属性之间至少空一个空格。不指定属性参数默认查看所有信息。

3.安装模块命令npminstall[<name>@<version>][-g][--save][-dev]npminstallvue-cli@2.9.7–g--save–dev(示例)<name>@<version>:表示安装指定的版本。通用格式为“模块@版本”。例如“vue-cli@2.9.7”为安装v2.9.7版本的vue-cli。如果不指定版本默认安装最新版本，实际使用时模块名称和版本号不需要加“<>”。-g或--global:表示全局安装。--save或-S：表示将安装包信息记录在package.json文件中的dependencies（生产阶段的依赖）属性中。-dev:表示将安装包信息记录在package.json文件中的devDependencies（开发阶段的依赖）属性中，所以开发阶段一般都使用这个参数。--save-dev或-D：表示将安装包信息记录在package.json文件中的devDependencie