1 Vue.js安装
1.1 使用cdn引入
在页面的<head>标签内使用<script>标签引入即可：
<script src="https://unpkg.com/vue@next"></script>1.2 使用npm安装
- npm即node package manager，它是一个Node.js包管理和分发工具，使用npm可以快速安装、使用和升级Vue.js。因此，我们首先需要安装Node.js，这里我们选择LTS版本，下载地址：http://nodejs.cn/download/current/，安装按默认选项即可。
- 安装完成后，打开命令行或Windows Terminal输入以下命令查看版本号。
node -v
npm -v若要使用最新版本的npm，则输入
npm install npm@latest -g命令即可。
- 安装Vue 3.0的命令为：
npm install vue@next
# install可简写为i
npm i vue@next以上方式为本地安装，推荐采用此方式，全局安装命令在以上命令后面添加
-g参数即可。
另外，npm的镜像服务器在国外，推荐使用淘宝镜像，即使用淘宝定制的cnpm命令代替默认的npm，安装cnpm的命令如下（这里我们全局安装cnpm）：
npm i -g cnpm --registry=https://registry.npm.taobao.org则cnpm安装模块的命令为：
cnpm install <Module Name>2 开发环境的配置
2.1 安装Visual Studio Code
VS Code自行下载安装即可，这里不再赘述。还需要安装方便我们开发的3个插件：
- Vetur：支持.vue文件的语法高亮、template模板以及大多数主流的前端开发的脚本和插件，例如Sass和TypeScript。
- ESLint：检查JavaScript的语法规则和代码风格。
- Code Runner：快速运行C、C++、Java、JavaScript等40多种编程语言。使用方式：在代码编辑器窗口右击，然后从弹出的菜单中选择【Run Code】选项运行代码即可。
2.2 安装vue-devtools浏览器插件
Edge浏览器插件下载地址：https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools-beta-ax/khampijcelfojpjcmmiibmhfkhacjhhj。
2.3 VSCode的配置
2.3.1 配置html模板
- 如下图所示：点击【设置】中的【用户代码片段】选项
注：还可以按Ctrl+Shift+P快捷键快速呼出，输出关键字“用户代码”，然后点击如下图所示的【首选项:配置用户代码片段】选项也可打开模板配置文件。
- 在弹出的悬浮式的搜索框中输入关键字“html”：
- 将下面的内容复制到大括号当中即可：如下：模板的快捷键为“h5”。
{
// 原先注释的内容为模板实例，可以参考
"h5 template": {
"prefix": "h5", // 模板的快捷键
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<title></title>",
"\t<style></style>",
"</head>",
"<body>",
"\t<div id=\"app\"></div>",
"\t<script src=\"https://unpkg.com/vue@next\"></script>",
"\t<script>",
"\t\tconst vm = Vue.createApp({}).mount('#app');",
"\t</script>",
"</body>",
"</html>"
],
"description": "lovewhoilove-H5" // 模板的描述
}
}2.3.2 去除格式化操作后多余空行
如下图所示，默认情况下格式化代码后会出现空行：
添加如下配置即可（第二行）："html.format.extraLiners": ""
2.3.3 启用Emmet展开缩写
VsCode新版本中按Tab不再默认启用Emmet展开缩写，如下图：在首选项配置中勾选emmet.Trigger Expansion On Tab复选框即可。按快捷键Ctrl+,(逗号)，然后输入关键字“emmt”即可找到。
该功能的用法示例：
E 代表HTML标签。
E#id 代表id属性。E.class 代表class属性。E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
例如：div#id，然后按Tab键即可自动生成带有id的div标签。
2.3.4 其他好用的插件
- HTML Play：在VS Code中打开网页查看效果，快捷键为Ctrl+Alt+H；或者按快捷键Ctrl+Shift+P，然后输入“play”关键字即可搜索并运行该插件。
- Vue 3 Snippets：根据关键字自动补全vue代码（包含2版本）。
- Auto-Open Markdown Preview：每当你打开新的Markdown文件自动显示Markdown预览，编辑器右上角也有手动打开预览窗口的按钮。
- Auto Rename Tag：自动重命名配对的HTML/XML标签。
- Auto Close Tag：自动添加HTML/XML关闭标签。
- Path Intellisense：自动路径补全，默认不带这个功能。
- Webstorm Icon Theme：让VS Code资源目录加上Webstorm风格的图标。
- IntelliJ IDEA Keybindings：IntelliJ IDEA按键绑定插件，包括WebStorm, PyCharm, PHP Storm等。
2.3.5 触发建议快捷键的修改
修改默认的快捷键如下图所示：触发建议的快捷键Ctrl+Space与系统输入法快捷键冲突，然后将参数提示修改为类似的，便于记忆。
则上述修改的快捷键为：
快捷键 | 功能说明 |
Shift+Alt+P | 参数提示 |
Shift+Alt+/ | 代码建议 |
2.4 VS Code常用快捷键总结
快捷键 | 功能说明 |
Shift+Alt+P（自定义） | 参数提示 |
Shift+Alt+/（自定义） | 代码建议 |
Ctrl+Shift+P | 显示命令面板 |
Ctrl+P | 按名称搜索文件（切换功能） |
Ctrl+F | 查找 |
Ctrl+Shift+F | 全局查找 |
Ctrl+H | 替换 |
Ctrl+Shift+H | 全局替换 |
Ctrl+N | 新建文件 |
Ctrl+Shift+N | 新建一个VS Code窗口 |
Ctrl+Shift+Z | 恢复撤销，撤销快捷键为Ctrl+Z |
Alt+ ↑ / ↓ | 向上或向下移动行 |
Shift+Alt+ ↑ / ↓ | 向上/向下复制行 |
Ctrl+Alt+↑ / ↓ | 多行同时添加光标 |
Ctrl+Enter | 在下面插入行 |
Ctrl+Shift+Enter | 在上面插入行 |
Shift + Alt + F | 格式化代码（文档） |
F2 | 重命名 |
Ctrl + F2 | 选择光标所在单词的所有相同单词 |
Shift + Alt + 拖动鼠标 | 列（框）选择 |
Shift+Alt+I | 选中一段代码后，按下该快捷键，可以在每一行末尾插入光标 |
Ctrl+/ | 注释 |
Shift+Alt+A | 多行注释 |
Ctrl+B | 显示/隐藏左侧窗口资源管理器 |
Ctrl+Shift+K | 删除当前行 |
Ctrl+~ | 显示/隐藏终端 |
Ctrl+Shift+~ | 新建终端 |
Ctrl+Shift+C | 在VS Code中打开命令行（Windows11打开的是terminal） |
参考资料：
