【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就可以。安装命令如下：

nvm install 21.7.1

三、 npm

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

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

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

2. 本地安装
   将安装包放在./node_modules下（运行 npm 命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。
   可以通过require()来引入本地安装的包。
3. 全局安装
   将安装包放在/usr/local下或者你node的安装目录。
   可以直接在命令行里使用。
4. 卸载包：

npm uninstall [package]

5. 更新包：

npm update [package]

6. 搜索包：

npm search [package]

7. 使用淘宝镜像：

npm install -g cnpm --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)

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

$ npm install -g cnpm --registry=[https://registry.npm.taobao.org](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来安装包了，比如：

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，会让文件查找更直观。
Vue3 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 + ] / [	行缩进
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 + 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	滚动到页面头部或