快速开始

开发前准备

Node环境(v18以上)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，Node.js 的出现极大的推动了 javascript 的工程化。Node.js 已经是当前前端开发的基础环境，也是任何工作流开始的地方。

可以通过Node官网下载LTS(长期支持版本)，这里我们选择v18以上版本即可，Node版本都是向前兼容的。

提醒

安装 Node 会默认自动安装包管理工具 npm。

验证开发环境:任意终端打开，输入一下命令，输出对应的版本号，则表示环境安装成功。

node -v
# v18.18.0
npm -v
# 9.8.1

开发工具

推荐使用的 IDE 是 VSCode，配合Vue - Official 扩展 (之前是 Volar)。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。你可以选择其他你心仪的IDE进行开发。

WebStorm(推荐) 同样也为 Vue 的单文件组件提供了很好的内置支持。

IntelliJ IDEA

Atom

浏览器插件

Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理(Pinia)的事件，注册路由查看，还可以进行组件性能分析。

F12打开(或右键选择检查)浏览器调试面板->点击Vue即可使用。

• 谷歌浏览器插件：下载地址(需科学上网)
• Firefox浏览器插件：下载地址
• Edge扩展：下载地址

包管理器

前端工程是通过npm来进行包管理的。由于国内网络环境的原因，安装依赖有时不太顺畅,可以使用以下方法:

• 可以使用cnpm命令行工具代替默认的 npm。

# 安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
# 安装模块
cnpm install [模块名]

• 当然，你也可以使用任意你心仪的命令行工具，只要配置 registry 即可

npm config set registry https://registry.npmmirror.com
# 直接使用npm
npm install [模块名]

• 如果你了解并喜欢yarn来进行包管理，推荐使用tyarn 来进行包管理，可以极大地减少 install 的时间和失败的概率，并且完全兼容 npm。

下载样板代码

您可以通过Fork Web端框架代码的方式,快速开始一个项目。Fork到的代码包含了框架的核心基础模块,搭配基础平台工具生成的业务代码使用(将生成的代码文件放入 src 目录)，快速构建一个完整的应用。

在项目根目录下启动终端，并输入以下命令:

# 安装依赖
npm install
# 启动开发环境
npm run dev

如果一切顺利，您将看到控制台成功启动一个 5173 端口的服务，点击链接，即可在浏览器访问。