创建Vue项目

搭配 TypeScript 使用 Vue

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

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

创建一个 Vue 应用

前提条件

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

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

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

?

1	npm init vue@latest

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

?

1 2 3 4 5 6 7 8 9 10 11 12

✔ 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 打开文件夹项目，然后打开一个终端，执行以下命令

?

1 2 3

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

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

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

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

?

1	npm run build