Vue详细学习笔记1

痴情一笑醉红颜

已于 2024-10-10 10:24:12 修改

阅读量1.2k Vue的学习文章标签： vue.js 学习笔记

于 2024-09-28 11:17:11 首次发布

本文链接：https://blog.csdn.net/qq_68021287/article/details/142550028

Vue的学习专栏收录该内容

2 篇文章 0 订阅

什么是Vue

Vue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。

使用Vue进行项目开发具有以下优势。

① 轻量级。 Vue 是一个轻量级的前端开发框架，文件体积小。

② Vue 项目基于 JavaScript 语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。

③ Vue 在使用上比较灵活，开发人员可以选择使用 Vue 开发一个全新项目，也可以将 Vue 引入现有项目。

④ Vue 通过虚拟 DOM 技术减少对 DOM 的直接操作，并通过尽可能简单的 API 来实现响应的数据绑定，可支持单向和双向数据绑定。

⑤ Vue 支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。

⑥ Vue 可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。

概念

Vue是基于MVVM模式的框架。

MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。

其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

View和Model不能直接通信，它们需要借助ViewModel才能进行通信。

ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。ViewModel 包含 DOM Listeners 和 Data Bindings。其中，DOM Listeners 用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改；Data Bindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。

特性

1、数据驱动视图

在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。

2、双向数据绑定

Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。

3、指令

指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。

指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。

4、插件

Vue支持插件，通过加载插件可以实现更多的功能。

常用的插件有Vue Router（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。

vue的版本

目前，Vue共有3个大版本，分别是Vue 1、Vue 2和Vue 3。其中，Vue 1几乎被淘汰，不建议学习与使用；Vue 2和Vue 3目前被广泛应用，并且Vue 3将会逐步替代Vue 2。

Vue 3支持Vue 2中绝大多数的API与特性，同时Vue 3还新增了一些特有的功能，并废弃了Vue 2中的一些旧功能。

Vue 3新增的功能包括组合式（Composition）API、多根节点组件等；废弃的旧功能包括过滤器（Filter）以及$on()、$off()和$once()实例方法等。虽然从表面上看，Vue 3和Vue 2的使用方式没有太大的差异，但Vue 3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。

Vue 3的新特性如下。

① 体积更小，采用按需编译的方式编译出来的文件体积比 Vue 2 的小。

② 性能提升，运行速度比 Vue 2 快 1.5 倍左右。

③ 具有更好的 TypeScript 支持。

④ 暴露了更底层的 API ，可以通过多种方式组织代码，代码使用上更加灵活。

⑤ 提供了更先进的组件。 Vue 创建了一个虚拟的 Fragment 节点，允许组件中有多个根节点。

⑥ 提供组合式 API ，能够更好地组合逻辑、封装逻辑、复用逻辑。

为了提高开发效率，开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用它可以更快速地开发用户界面。

常用的UI组件库如下

目前，主流UI组件库都已经发布了支持Vue 3的版本。

①Element Plus组件库：一款基于Vue 3的桌面端组件库。

②Vant组件库：一款开源移动端组件库，它从3.0版本开始支持Vue 3。

③Ant Design Vue组件库：一款用于开发和服务企业级后台产品的组件库，它从2.0版本开始支持Vue 3。

VScode编辑器

链接：Documentation for Visual Studio Code

VS Code编辑器具有以下特点。

①轻巧、极速，占用系统资源较少。

②具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。

③跨平台，可用于macOS、Windows和Linux操作系统。

④主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色，以及可以快速查看已打开的项目文件和项目文件结构。

⑤提供丰富的扩展，用户可根据需要自行下载和安装扩展。

中文语言扩展下载安装和vue插件

快捷生成html代码直接输入！回车即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Node.js

Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API，例如文件操作API、网络通信API等。链接：Node.js 中文网 (nodejs.cn)

包管理工具

在Vue项目开发中，经常需要通过各种第三方的包（package）来扩展项目的功能。“包”可以理解为将一系列模块化的代码打包起来，形成一个包，以便于使用。项目中所用到的包称为项目的依赖（dependency）。为了方便管理第三方的包，需要用到包管理工具。包管理工具可以让开发人员轻松地下载、升级、卸载包。假设在项目开发时，没有包管理工具，若想使用第三方包，则每次都需要下载、解压后才可以使用，非常烦琐。而使用包管理工具，只需通过一条命令即可下载并安装第三方包，非常方便，而且还可以指定下载的版本等。

1、npm

在安装Node.js时会自动安装相应版本的npm，不需要单独安装，使用“npm -v”命令可以查看npm的版本，如下图所示。

需求

使用npm包管理工具可以解决以下场景的需求。

①从npm服务器下载别人编写的第三方包到本地使用。

②从npm服务器下载并安装别人编写的命令行程序到本地来使用。

③将自己编写的包或命令行程序上传到npm服务器供别人使用。

常用的命令

npm提供了快速操作包的命令，只需要执行简单的命令就可以很方便地对第三方包进行管理。

npm中常用的命令如下。

lnpm install 包名：可简写为“npm i 包名”，用于为项目安装指定名称的包。如果加上-g选项，则会把包安装为全局包，否则只安装到本项目中。如果省略包名，则npm会根据当前目录下的package.json文件中保存的依赖信息为项目安装所有的包。

lnpm uninstall 包名：用于卸载指定名称的包。

lnpm update 包名：用于更新指定名称的包。

提速国内镜像

在下载npm安装包时，下载速度可能会比较慢，这是因为提供包的服务器在国外。为了加快包的下载速度，建议将下载源切换成国内镜像服务器。为npm设置镜像地址的具体命令如下。

npm config set registry https://registry.npmmirror.com

为了验证镜像地址是否设置成功，可以通过如下命令进行验证

npm config get registry

执行上述命令后，若输出了设置的镜像地址，则表示设置成功。

2、yarn

在使用yarn之前，需要先确保计算机中已经安装了Node.js环境，再使用npm命令安装yarn，安装命令如下。

npm install yarn -g

为了验证yarn是否安装成功，可以通过“yarn -v”命令查看yarn的版本信息，如下图所示.

提速国内镜像

为了提高下载yarn安装包的速度，也可以将yarn的下载源切换成国内镜像服务器。为yarn设置镜像地址的具体命令如下。

yarn config set registry https://registry.npmmirror.com

为了验证镜像地址是否设置成功，可以通过如下命令进行验证。

yarn config get registry

执行上述命令后，若输出了设置的镜像地址，则表示设置成功.

常用命令

下面列举yarn中一些常用的命令。

lyarn install：可简写为yarn，用于为项目安装所有包。如果提供了-g选项，则会把包安装为全局包，否则只安装到本项目中。

lyarn remove 包名：用于卸载指定名称的包。

lyarn up 包名：用于更新指定名称的包。

lyarn add 包名：用于添加指定名称的包。

3、yarn与npm包管理工具的区别

①使用npm安装同一个包时，每次安装都需要重新下载，而yarn会缓存每个下载过的包，再次使用时无须重复下载。

②npm按照队列安装每个包，也就是说，必须要等到当前包安装完成后，才能继续安装后面的包，而yarn可以利用并行下载的方式提高资源利用率，安装速度更快。

③npm的输出信息比较冗长，在执行npm install命令时，命令提示符里会输出所有被安装的包的信息。相比之下，yarn的输出信息比较简洁，只输出必要的信息，同时也提供了一些命令供开发者查询额外的安装信息。

使用Vite创建Vue 3项目

什么是Vite

Vite（读音：/vit/）是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。

在Vue 3出现前，Vue 2一般使用Vue CLI创建。Vue CLI基于Webpack构建并配置项目，在项目启动时，Webpack需要从入口文件索引整个项目的文件，编译成一个或多个单独的.js文件。虽然Webpack对代码进行了拆分，但是仍可能一次生成所有路由下的编译后的文件，导致服务启动时间随着项目的复杂度增加而呈指数式的增长。而Vite改进了这一点，在项目启动时，Vite会对模块代码进行按需加载，启动速度更快。因此，当使用Vue3 开发新项目时，推荐使用Vite进行创建。

Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。

需要注意的是，Node.js必须为14.18及以上版本时才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常运行。另外，Node.js 的14、16等更新版本不再支持Windows 7操作系统，推荐使用Windows 10等新版操作系统。

Vite提供了两种创建项目的命令。

手动创建项目的命令

使用npm或yarn包管理工具都可以搭配Vite手动创建项目，具体命令如下。

# 使用npm create命令创建项目
npm create vite@latest
# 使用yarn create命令创建项目
yarn create vite

上述命令展示了两种包管理工具用于创建Vite项目，在使用时任选其一即可。npm create和yarn create命令后跟一个vite包名，表示初始化Vite。vite@latest表示在 npm中安装最新版本的Vite

项目创建完成后的提示命令，具体命令解释如下

cd vite-project		# 切换到项目目录
yarn			# 安装项目的全部依赖
yarn dev		# 启动服务

上述命令中，yarn dev命令是Vue3项目中package.json文件里面scripts节点配置的命令。除了yarn dev命令外，还有2个常用命令yarn build和yarn preview，它们分别表示构建生产环境项目和构建本地预览环境项目。这3个命令实际上都是别名，是为了便于开发人员记忆。当执行这3个命令时，yarn会读取当前项目的package.json文件中的命令配置，找到真正的命令并执行。

Vue 3项目的package.json文件中的命令配置如下。

"scripts": {
  "dev": "vite",
  "build": "vite build", 
  "preview": "vite preview"
},

上述配置中，dev是vite的别名，build是vite build的别名，preview是vite preview的别名。也就是说，当执行yarn dev时，实际执行的命令是yarn vite。别名可以自定义，如果修改了别名，在执行命令时需要使用修改后的别名。

项目启动后，会默认开启一个本地服务，具体如下。

VITE v4.1.4  ready in 441 ms
➜  Local:   http://127.0.0.1:5173/

在浏览器中打开http://127.0.0.1:5173/，如下图所示。

通过模板自动创建项目的命令

通过模板自动创建项目的方式相对简单，它通过附加的命令行选项直接指定项目名称和模板，省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设，可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。通过附加的命令行选项直接指定项目名称和模板的基本语法格式如下。

# 使用npm 6或更低版本创建项目
npm create vite@latest <项目名称> --template <模板名称>
# 使用npm 7或更高版本创建项目
npm create vite@latest <项目名称> -- --template <模板名称>
# 使用yarn create命令创建项目
yarn create vite <项目名称> --template <模板名称>

打开命令提示符，切换到D:\vue\chapter01目录，使用yarn创建一个基于Vite+Vue模板且项目名称为hello-vite的项目。

yarn create vite hello-vite --template vue

执行上述命令后，hello-vite项目创建完成的效果如下图所示

在项目创建完成后，给出了一些提示命令，需要执行这些命令才能完成项目启动，具体命令如下。

cd hello-vite		# 切换到项目目录
yarn			# 安装项目的全部依赖
yarn dev		# 启动服务

项目启动后，会默认开启一个本地服务，具体如下。

VITE v4.1.4  ready in 441 ms
  ➜  Local:   http://127.0.0.1:5173/

在浏览器中打开http://127.0.0.1:5173/，页面效果与手动创建Vue 3项目的页面效果相同。

Vue 3项目的目录结构

Vue 3项目创建成功后，使用VS Code编辑器打开项目目录，可以看到一个默认生成的项目目录结构，如图所示。

下面简要介绍Vue 3项目的目录结构中各个目录和文件的作用，具体如下。

vscode：存放VS Code编辑器的相关配置。

node_modules：存放项目的各种依赖和安装的插件。

public：存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。

src：源代码目录，保存开发人员编写的项目源代码。

src\assets：存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

src\components：存放单文件组件，即.vue文件。

src\components\HelloWorld.vue：一个名称为HelloWorld的单文件组件。

src\App.vue：项目的根组件。

src\main.js：项目的入口文件，用于创建Vue应用实例。

src\style.css：项目的全局样式表文件。

.gitignore：向Git仓库上传代码时需要忽略的文件列表。

index.html：默认的主渲染页面文件，同时也是页面的入口文件。

Vue 3项目的运行过程

使用Vite构建Vue 3项目后，当执行yarn dev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

1、src\App.vue文件

Vue 3项目是由各种组件组成的，src\App.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。

2、index.html文件

index.html文件是页面的入口文件，该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。

3、src\main.js文件

src\main.js文件是项目的入口文件，该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础，每个Vue项目都是从创建Vue应用实例开始的。

本章小结

本章首先介绍了前端技术的发展，接着对Vue的相关概念进行了简要介绍；然后讲解了Vue开发环境，包括Visual Studio Code编辑器、Node.js环境以及常见的包管理工具；最后分别讲解了如何使用Vite创建Vue 3项目。通过本章的学习，读者应对Vue有一个整体的认识，能够创建Vue 3项目。