你好，我是大圣，欢迎进入课程的第二部分——基础入门篇。

在课程导读篇，我们了解了 Vue 3 的新特性以及从 Vue 2 升级到 Vue 3 的方法。相信你现在已经和小圣同学一样，迫不及待地想做一个实际的项目。当然了，在实战中学习 Vue 3 也是最好并且最快的学习方式。

不过，你先别着急。在基础入门篇，我会用 5 讲的篇幅，带你学习 Vue 3 的核心功能，包括项目搭建、Composition API、响应式、组件化和动画。这 5 讲结束后，你就会对 Vue 3 的核心功能有一个整体的了解，为我们全家桶实战篇的学习打下坚实的基础。

实际开发中，除了 Vue 3 这个库，我们还需要 Vue 3 的最新全家桶，也就是 Vue 3 的周边生态，这其实就和士兵需要武器装备是一样的。今天这次，我会手把手带你安装和构建 Vue 3 开发环境。

环境准备

在之前的语法演示中，我们直接使用 script 引入 Vue 3，从而在浏览器里实现了所有调试功能。但是在实际的项目中，我们会使用专门的调试工具。在项目上线之前，代码也需要打包压缩，并且考虑到研发效率和代码可维护性，所以在下面，我们需要建立一个工程化的项目来实现这些功能。

你能在下图中看到我们现在要用到的工具，VS Code 写 Vue 3 的代码，直接在 Chrome 浏览器里展示，我们会在这个基础之上逐步添加新的工具。

对于 Vue 2，官方推荐用 Vue-cli 创建项目；而对于 Vue 3，我建议你使用 Vite 创建项目，因为 vite 能够提供更好更快的调试体验。在使用 Vite 之前，我们要先安装 Node.js 。

下载安装 Node.js 的过程是傻瓜式的，直接去Node.js 官网下载安装即可。下载的时候，我们可以选择 LTS 版本，也就是稳定版，进行下载和安装即可。安装完毕后，我们创建 vuejs 工作目录，然后在命令行窗口执行 node -v 指令，如果看到如下界面就算安装成功啦。

之后，我们就可以在 VS Code 里进行 Vue 项目的开发。不过，在正式开发之前，我推荐使用 VS Code 的官方扩展插件 Volar，这个插件给 Vue 3 提供了全面的开发支持。我们访问 Volar 的地址，直接点击 Install，就会启动 VS Code 并且安装。然后使用 Chrome 访问 Vue 3 调试插件的地址 ，可以帮助我们在浏览器里高效的调试页面。

接下来，在命令行窗口里，我们对 vuejs 目录执行下面的命令，这样就可以创建一个 Vite 的初始化项目。

npm init @vitejs/app

之后，在 Project name 这一行，我们输入项目的名字，例如 geek-admin；接着，在 Select a framework 这一行输入框架的名字，这里我们选择 vue；再之后，在 select a variant 这一行，因为在项目里，我们没有选择 TS，所以这里我们依然选择 vue 即可。

我们看一下 geek-admin 下面的文件目录，这个目录就是我们项目启动的骨架了。目录中的 index.html 是项目的入口；package.json 是管理项目依赖和配置的文件；public 目录放置静态资源，比如 logo 等图片；vite.config.js 就是和 Vite 相关所有工程化的配置；src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

在这之后，我们在 geek-admin 文件夹内执行 npm install 命令，来进行依赖的安装，然后执行 npm run dev 命令来启动项目，看到如下信息就算是启动成功了。