vue3 快速入门 (一) : 环境配置与搭建

1. 本文环境

• Vue版本 : 3.4.29
• Node.js版本 : v20.15.0
• 系统 : Windows11 64 位
• IDE : VsCode

2. 安装 Node.Js

首先，我们需要安装 Node.Js。Node.js 提供了运行 JavaScript 代码的环境。并且 Node.js 带来了 npm，它是 JavaScript 世界的包管理工具。开发 vue 时，可以使用 npm 来安装、管理和共享各种依赖。

安装 Node.js 时，npm 会作为默认包管理工具一同安装。

3. 安装 Vue

打开 CMD 命令行，运行如下代码，创建一个新的 vue 项目

npm create vue@latest

会有一些可选项，这里我们可以选择使用 TypeScript

✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./...
Done.

新建完成后，进入项目根目录

cd your-project-name>

安装项目所需依赖

npm install

运行项目

npm run dev

这里时候，我们可以看到 http://localhost:5173/ 这个 URL

复制这个 URL 到浏览器，可以看到如下画面，说明项目启动成功了

4. 安装 VSCode

4.1 安装 VSCode

下载地址 : https://code.visualstudio.com/

4.2 安装 Vue - Official 插件

这是个官方的 vue 插件，支持语法高亮、代码提示、代码模板等功能

4.3 修改为 IntelliJ 的快捷键

可以安装 IntelliJ IDEA Keybindings 插件，将 VSCode 的快捷键改为 InteliJ 的快捷键 (我用习惯了)
如果没有这个习惯，也不可以不修改。

具体看这篇文章 : visual studio code-webstorm 的快捷键映射_webstorm 按钮映射应该选什么 -CSDN 博客

5. 安装 Chrome

Chrome 浏览器下载地址 : https://www.google.cn/intl/zh-CN/chrome/

5.1 Chrome 安装 Vue 插件

进入这个网站 : 极速插件 : 安装 Chrome 插件，下载 vue.js devtools 插件，并解压。
Chrome进入 扩展扩展程序 页面，开启开发者模式。
将解压后的插件拖入 管理扩展程序 页面，安装完成。

具体详见这篇文章 : 下载、编译、安装、使用 vue-devtools

vue.js devtools插件的作用
安装完成后，就可以在 Chrome 的开发者工具里看到 Vue 这一项了。
可以用来看 Vue 应用程序中所有组件的层级关系和状态，以及还有很多方便开发调试Vue 的功能。

5.2 chrome 移动端页面调试

在 Chrome 中，点击 F12，进入如下页面，通过点击 Toggle device toolbar，切换至移动 Web 调试模式。

具体详见 : chrome 移动 Web H5 调试

6. vue 快速入门系列文章

vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 实现第一个 Vue 网页，并在手机上浏览