Vue3总结

第一章：准备工作

第一节：Node安装

在进行 Vue 项目开发时，必须先安装Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。在 Vue 项目中，我们通常会使用到 Node.js 的 npm（Node Package Manager）来管理项目所需的各种库和工具，例如 Vite、Babel、ESLint 等。此外，Node.js 还可以用来运行开发环境中的本地服务器，以及编译、打包项目等。因此，安装 Node.js 是进行 Vue 项目开发的基础步骤。

一、nvm

1. nvm安装

nvm（Node Version Manager）是一个用来管理 node版本的工具。我们之所以需要使用 node，是因为我们需要使用 node中的 npm(Node Package Manager)，使用 npm的目的是为了能够方便的管理一些前端开发的包！nvm的安装非常简单，步骤如下：

到这个链接下载 nvm的安装包：https://github.com/coreybutler/nvm-windows/releases。
然后点击一顿下一步，安装即可！
安装完成后，还需要配置环境变量。在 我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个，把 nvm所处的路径填入进去即可！
打开 cmd，然后输入 nvm，如果没有提示没有找不到这个命令。说明已经安装成功！
Mac或者 Linux安装 nvm请看这里：https://github.com/creationix/nvm。也要记得配置环境变.

2. `nvm`常用命令：

nvm install node：安装最新版的 node.js。nvm i == nvm install。
nvm install [version]：安装指定版本的 node.js 。
nvm use [version]：使用某个版本的 node。
nvm list：列出当前安装了哪些版本的 node。
nvm uninstall [version]：卸载指定版本的 node。

二、node：

安装完 nvm后，我们就可以通过 nvm来安装 node了。这里我们安装 21.7.1的 node.js就可以。安装命令如下：

1	`nvm install 21.7.1`

三、npm

npm(Node Package Manager)在安装 node的时候就会自动的安装了。当时前提条件是你需要设置当前的 node的版本：nvm use 21.7.1。然后就可以使用 npm了.
关于 npm常用命令以及用法，请看下文。

1. 安装包

安装包分为全局安装和本地安装。全局安装是安装在当前 node环境中，在可以在cmd中当作命令使用。而本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。安装的方式只有 -g参数的区别：

1 2	`npm install express # 本地安装 npm install express -g # 全局安装`

2. 本地安装

将安装包放在 ./node_modules下（运行 npm 命令时所在的目录），如果没有 node_modules目录，会在当前执行 npm命令的目录下生成 node_modules目录。
可以通过 require()来引入本地安装的包。

3. 全局安装

将安装包放在 /usr/local下或者你 node的安装目录。
可以直接在命令行里使用。

4. 卸载包

1	`npm uninstall [package]`

5. 更新包

1	`npm update [package]`

6. 搜索包

1	`npm search [package]`

7.使用淘宝镜像：

1	`npm install -g cnpm --registry=https://registry.npm.taobao.org`

如果执行以上命令出现类似以下错误：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

npm ERR! A complete log of this run can be found in: C:\Users\paofu\AppData\Local\npm-cache\_logs\2024-03-27T06_46_40_597Z-debug-0.log

可以执行以下两条命令解决：

# 清理缓存
$ npm cache clean --force
# 取消ssl验证
$ npm config set strict-ssl false

以后就可以使用cnpm来安装包了，比如：

1	`cnpm install express`

第二节：VSCode

Vue的开发工具用的是 VSCode(Visual Studio Code)，这款开发工具是微软官方出品，开源，免费，并且功能相当强大，使用者很多，插件相当丰富，是 Vue开发的不二之选。以下对 VSCode的使用做一个简单配置。

一、下载地址

https://code.visualstudio.com/。

二、概念讲解

VSCode中分 Workspace和 Folder，Workspace相当于是一个项目的集合，可以添加许多的 Folder，在 Workspace中可以做好一些配置，那里面所有的 Folder都是按照这个配置来的，就不需要我们每次写个项目都配置一下了。而 Folder就是我们的每个项目的文件夹。

三、插件安装

后面开发 Vue项目，使用 .vue的单文件开发，就需要一些插件来帮我们识别 .vue文件。插件安装在 Extension中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。

这里我们开发 Vue推荐的几个插件：

Vue - Official：Vue官方出品的识别 .vue语法的插件。
Chinese (Simplified) ：将编辑器设置为中文的插件。
Javascript(ES6) code snippets：ES6语法提示。
Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改了，结束标签也会跟着修改。
Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
Prettier：格式化代码的插件。
vscode-icons：可选。提供了很多类型的文件夹 icon，不同类型的文件夹使用不同的 icon，会让文件查找更直观。
Vue VSCode Snippets：在编写vue代码时，可快速生成代码片段。
Vue Peek：在Vue组件、模块中快速跳转。

更多插件大家可以自行搜索和安装。

第三节：VSCode快捷键

快捷键有五种组合方式(科普)

Ctrl + Shift + ?：这种常规组合按钮
Ctrl + C Ctrl +V：同时依赖一个按键的组合
Shift + V C：先组合后单键的输入
Ctrl + Click：键盘 + 鼠标点击
Ctrl + DragMouse：键盘 + 鼠标拖动 macos下大多键位等同，Ctrl换成Command

通用快捷键

快捷键	作用
Ctrl+Shift+P,F1	展示全局命令面板
Ctrl+P	快速打开最近打开的文件
Ctrl+Shift+N	打开新的编辑器窗口
Ctrl+Shift+W	关闭编辑器

基础编辑

快捷键	作用
Ctrl + X	剪切
Ctrl + C	复制
Alt + up/down	移动行上下
Shift + Alt up/down	在当前行上下复制当前行
Ctrl + Shift + K	删除行
Ctrl + Enter	在当前行下插入新的一行
Ctrl + Shift + Enter	在当前行上插入新的一行
Ctrl + Shift +\|	匹配花括号的闭合处，跳转
Ctrl + ] / [	行缩进
Home	光标跳转到行头
End	光标跳转到行尾
Ctrl + Home	跳转到页头
Ctrl + End	跳转到页尾
Ctrl + up/down	行视图上下偏移
Alt + PgUp/PgDown	屏视图上下偏移
Ctrl + Shift + [	折叠区域代码
Ctrl + Shift + ]	展开区域代码
Ctrl + K Ctrl + [	折叠所有子区域代码
Ctrl + k Ctrl + ]	展开所有折叠的子区域代码
Ctrl + K Ctrl + 0	折叠所有区域代码
Ctrl + K Ctrl + J	展开所有折叠区域代码
Ctrl + K Ctrl + C	添加行注释
Ctrl + K Ctrl + U	删除行注释
Ctrl + /	添加关闭行注释
Shift + Alt +A	块区域注释
Alt + Z	添加关闭词汇包含

快捷键	作用
Ctrl + T	列出所有符号
Ctrl + G	跳转行
Ctrl + P	跳转文件
Ctrl + Shift + O	跳转到符号处
Ctrl + Shift + M	打开问题展示面板
F8	跳转到下一个错误或者警告
Shift + F8	跳转到上一个错误或者警告
Ctrl + Shift + Tab	切换到最近打开的文件
Alt + left / right	向后、向前
Ctrl + M	进入用Tab来移动焦点

查询与替换

快捷键	作用
Ctrl + F	查询
Ctrl + H	替换
F3 / Shift + F3	查询下一个/上一个
Alt + Enter	选中所有出现在查询中的
Ctrl + D	匹配当前选中的词汇或者行，再次选中-可操作
Ctrl + K Ctrl + D	移动当前选择到下个匹配选择的位置(光标选定)

多行光标操作于选择

快捷键	作用
Alt + Click	插入光标-支持多个
Ctrl + Alt + up/down	上下插入光标-支持多个
Ctrl + U	撤销最后一次光标操作
Shift + Alt + I	插入光标到选中范围内所有行结束符
Ctrl + I	选中当前行
Ctrl + Shift + L	选择所有出现在当前选中的行-操作
Ctrl + F2	选择所有出现在当前选中的词汇-操作
Shift + Alt + right	从光标处扩展选中全行
Shift + Alt + left	收缩选择区域
Shift + Alt + (drag mouse)	鼠标拖动区域，同时在多个行结束符插入光标
Ctrl + Shift + Alt + (Arrow Key)	也是插入多行光标的[方向键控制]
Ctrl + Shift + Alt + PgUp/PgDown	也是插入多行光标的[整屏生效]

丰富的语言操作

快捷键	作用
Ctrl + Space	输入建议[智能提示]
Ctrl + Shift + Space	参数提示
Tab	Emmet指令触发/缩进
Shift + Alt + F	格式化代码
Ctrl + K Ctrl + F	格式化选中部分的代码
F12	跳转到定义处
Alt + F12	代码片段显示定义
Ctrl + K F12	在其他窗口打开定义处
Ctrl + .	快速修复部分可以修复的语法错误
Shift + F12	显示所有引用
F2	重命名符号
Ctrl + K Ctrl + X	移除空白字符
Ctrl + K M	更改页面文档格式

编辑器管理

快捷键	作用
Ctrl + F4, Ctrl + W	关闭编辑器
Ctrl + k F	关闭当前打开的文件夹
Ctrl +
Ctrl + 1/2/3	切换焦点在不同的切割窗口
Ctrl + K Ctrl <-/->	切换焦点在不同的切割窗口
Ctrl + Shift + PgUp/PgDown	切换标签页的位置
Ctrl + K <-/->	切割窗口位置调换

文件管理

快捷键	作用
Ctrl + N	新建文件
Ctrl + O	打开文件
Ctrl + S	保存文件
Ctrl + Shift + S	另存为
Ctrl + K S	保存所有当前已经打开的文件
Ctrl + F4	关闭当前编辑窗口
Ctrl + K Ctrl + W	关闭所有编辑窗口
Ctrl + Shift + T	撤销最近关闭的一个文件编辑窗口
Ctrl + K Enter	保持开启
Ctrl + Shift + Tab	调出最近打开的文件列表，重复按会切换
Ctrl + Tab	与上面一致，顺序不一致
Ctrl + K P	复制当前打开文件的存放路径
Ctrl + K R	打开当前编辑文件存放位置【文件管理器】
Ctrl + K O	在新的编辑器中打开当前编辑的文件

显示

快捷键	作用
F11	切换全屏模式
Shift + Alt + 1	切换编辑布局【目前无效】
Ctrl + =/-	放大 / 缩小
Ctrl + B	侧边栏显示隐藏
Ctrl + Shift + E	资源视图和编辑视图的焦点切换
Ctrl + Shift + F	打开全局搜索
Ctrl + Shift + G	打开Git可视管理
Ctrl + Shift + D	打开DeBug面板
Ctrl + Shift + X	打开插件市场面板
Ctrl + Shift + H	在当前文件替换查询替换
Ctrl + Shift + J	开启详细查询
Ctrl + Shift + V	预览Markdown文件【编译后】
Ctrl + K v	在边栏打开渲染后的视图【新建】

集成终端

快捷键	作用
Ctrl + `	打开集成终端
Ctrl + Shift + `	创建一个新的终端
Ctrl + Shift + C	复制所选
Ctrl + Shift + V	复制到当前激活的终端
Shift + PgUp / PgDown	页面上下翻屏
Ctrl + Home / End	滚动到页面头部或尾部

原文链接：https://blog.csdn.net/crper/article/details/54099319

第二章：Vue基础

第一节：Vue介绍

一、Vue介绍

Vue(读音 /vjuː/，类似于 view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手 尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用 vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！Vue目前是3版本了。

Vue官网：https://cn.vuejs.org/
Vue Github：https://github.com/vuejs

二、Vue项目创建

创建Vue项目目前有两种方式，一种是使用 VueCli，另一种是使用 Vite，其中 VueCli已经处于维护模式了，过不了多久便不再支持，因此我们学习 Vite的方式创建。

使用 Vite 创建项目有以下优点：

采用热重载功能，能快速的启动服务。
对 TypeScript、JSX等支持开箱即用。
按需编译，不用等待整个应用编译完成。

使用 Vite 创建项目过程如下：

1
2
3

$ npm create vue@latest
或
$ npm create vue@3.10.3

接着会出现一些配置的提示：

# 输入项目名称
? 请输入项目名称： startvue

# 是否添加TypeScript支持
? 是否使用 TypeScript 语法？  否

# 是否添加JSX支持
? 是否启用 JSX 支持？ 否

# 是否添加VueRouter
? 是否引入 Vue Router 进行单页面应用开发？  否

# 是否添加pinia
? 是否引入 Pinia 用于状态管理？  否

# 是否添加单元测试
? 是否引入 Vitest 用于单元测试？  否

# 是否添加端到端测试方案
? 是否要引入一款端到端（End to End）测试工具？  不需要

# 是否添加ESLint语法检查
? 是否引入 ESLint 用于代码质量检测？  是

# 是否添加Prettiert代码格式化
? 是否引入 Prettier 用于代码格式化？ 否

# 是否引入Vue DevTools7调试
? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) 是

创建完项目后，在项目根路径下输入命令：

1
2
3

$ cd startvue
$ npm install
$ npm run dev

三、项目结构介绍

node_modules：存放项目依赖的第三方包
public：一些公共的文件
src：项目的源代码，图片资源等
--assets：图片、字体等静态资源
--components：自定义组件
App.vue：项目的主入口vue文件
main.js：项目的主入口ts文件
index.html：项目的html文件
package.json：项目依赖包文件
vite.config.js：vite项目配置文件

第二节：组合式API

一、基本介绍

在Vue2中，使用的是 Options API （选项式API）。而Vue3中虽然也兼容 Options API ，但是更推荐 Composition API （组合）。那什么是 Options API，什么是 Composition API 呢？先来看以下例子：

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {% raw %}{{ {% endraw %}count }}</button>
</template>

以上便是Options API ，如果改成Composition API ，那么要借助setup 语法。

二、setup介绍

setup 是Vue3 的配置项，它是一个函数，之前使用Options API 方式定义的数据、方法、计算属性、监听等数据，都是配置在setup 中。以下示例：

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  setup() {
    // 响应式状态
    // 响应式状态
    const count = ref(0)

    // 用来修改状态、触发更新的函数
    function increment() {
      count.value++
    }

    // 生命周期钩子
    onMounted(() => {
      console.log(`The initial count is ${count.value}.`)
    })

    return {
      count,
      increment
    }
  }
}
</script>

<template>
  <button @click="increment">Count is: {% raw %}{{ {% endraw %}count }}</button>
</template>

在setup 中返回的对象，不管是数据还是方法，都可以直接在模板中使用。而为了实现方便，可以使用setup语法糖，即

Vue3总结

Vue3总结

第一章：准备工作

第一节：Node安装

一、nvm

1. nvm安装

2. nvm常用命令：

二、node：

三、npm

1. 安装包

2. 本地安装

3. 全局安装

4. 卸载包

5. 更新包

6. 搜索包

7.使用淘宝镜像：

第二节：VSCode

一、下载地址

二、概念讲解

三、插件安装

第三节：VSCode快捷键

快捷键有五种组合方式(科普)

通用快捷键

基础编辑

导航

查询与替换

多行光标操作于选择

丰富的语言操作

编辑器管理

文件管理

显示

集成终端

第二章：Vue基础

第一节：Vue介绍

一、Vue介绍

二、Vue项目创建

三、项目结构介绍

第二节：组合式API

一、基本介绍

二、setup介绍

2. `nvm`常用命令：