创建Vue项目

搭配 TypeScript 使用 Vue

像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误，也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全，TypeScript 还改善了开发体验和效率。

Vue 本身就是用 TypeScript 编写的，并对 TypeScript 提供了一等公民的支持。所有的 Vue 官方库都自带了类型声明文件，开箱即用。

创建一个 Vue 应用

前提条件

• 熟悉命令行
• 已安装 16.0 或更高版本的 Node.js

在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，然后在命令行中进入新建的项目文件夹目录下，然后再运行以下命令：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes //使用 TypeScript 格式编写脚本，而非JavaScript
✔ Add JSX Support? … No / Yes //推荐：NO，脚本变量中可以包含 HTML 元素即 JavaScript XML扩展语法，HTML元素和JavaScript 混合编程，不符合单一职责原则
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes // 端到端测试
✔ Add ESLint for code quality? … No / Yes // 代码质量检测
✔ Add Prettier for code formatting? … No / Yes //代码格式化

Scaffolding project in ./<your-project-name>...
Done.

注意：上面蓝色字体为推荐安装组件

　如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

　用 VS Code 打开文件夹项目，然后打开一个终端，执行以下命令

cd <your-project-name>
> npm install //必须执行，让项目重新安装依赖项。不执行可能会报错
> npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>

推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。

发布到生产环境时，请运行：

npm run build