VSCode
最新版本下载
code.visualstudio.com/download
插件安装方法
- 打开 Visual Studio Code。
- 点击边栏的「扩展」图标。
3. 在「搜索扩展」框中输入插件名称，然后按「Enter」键。
4. 在搜索结果中找到你想要安装的插件，并点击「安装」按钮。
5. 安装成功后，你可以在「已安装」标签页中查看已安装的插件。
6. 重新启动 Visual Studio Code 即可使用安装的插件。
7. 安装中文包
Vue3相关插件
Vue - Official
Vue3 官方推荐，包含了Volar
Vue 3 Snippets
- 提供 Vue 3 相关的代码片段，方便快速输入常见代码结构。
- 支持 Vue 组件选项、指令、生命周期等。
ESLint
- 用于代码风格检查和静态分析。
- 与 Vue 3 的 ESLint 插件一起使用，确保符合 Vue 3 的规范。
Prettier - Code formatter
- 代码格式化工具，帮助保持代码风格的一致性。
- 与 Vue 3 的 Prettier 插件一起使用，确保与 Vue 3 的风格一致。
JavaScript Debugger
- 与 Chrome 调试器集成，方便调试 Vue 3 应用程序。
- 支持断点、监视变量等调试功能。
Path Intellisense
- 路径自动完成插件，方便在 import 语句中快速输入文件路径。
- 提高开发效率。
GitLens
- 提供强大的 Git 功能，方便查看和比较代码的历史版本。
- 支持注释、贡献者信息等。
Auto Import
- 自动导入插件，可帮助自动完成和自动导入模块。
- 提高开发效率，减少手动导入的繁琐过程。
HTML CSS Support
- 支持 HTML、CSS、SCSS、LESS 等语法的智能提示和代码补全。
Auto Rename Tag
- 自动重命名匹配的 HTML 标签。
JavaScript Debugger
- 浏览器调试vue项目。
Vue3
基本介绍
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、响应式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以轻松搞定。 cn.vuejs.org/
环境准备
学习 Vue 3, 需要安装 Node.js 18.0 版本或者更高 nodejs.org/en
安装成功后的界面显示如下。
创建一个 Vue 应用
参考官网 cn.vuejs.org/guide/quick… 按官方生成的vue工程，使用vite作为了前端构建工具。
vite官方地址 cn.vitejs.dev/guide/
npm create vue@latest 执行没有反应或出现的问题
npm config set registry=https://registry.npmmirror.com
npm config get registry
正常的安装页面如下：
运行Vue 应用
1. 修改默认端口号
vue3默认端口号为5173。通过vite生成的项目，打开并编辑vite.config.js，配置server节点，修改port为8080或其他值。
2. 配置launch.json
launch.json是VSCode用于调试的配置文件，比如指定调试语言环境，指定调试类型等等。第一次运行程序的时候，就可以选择让VSCode自动创建出来。
打开项目 .vscode目录下的launch.json，增加如下配置，url中的端口号与vite.config.js的配置端口号一致。
3. 配置tasks.json
VSCode 的 tasks.json 文件是用来配置任务的，它定义了一组命令行任务，可以执行编译、运行、测试等操作。
.vscode目录下新建tasks.json文件，配置如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "vuejs:start",
"type": "npm",
"script": "dev",
"isBackground": true
}
]
}
4. 启动调试
运行结果如下：
如果以上都不行
直接使用vue官方在线练习网站， play.vuejs.org/ 支持项目下载
