垦荒学园
  • 中文

      • Vue 创建项目

      创建 Vue 项目最现代、最推荐的方式是使用官方提供的命令行工具 create-vue。这个工具基于 Vite，速度极快，并且提供了丰富的配置选项，让你可以根据需求定制项目。

      使用 create-vue

      确保你已经安装了较新版本的 Node.js (>= 16.0)。然后，在你的终端中运行以下命令：

      npm create vue@latest

      这个命令会从 npm 拉取并运行 create-vue 的最新版本。接下来，它会引导你完成一系列的配置选项。

      项目配置选项详解

      让我们来详细了解一下创建过程中遇到的每个选项：

      1. Project name: 为你的项目设置一个名称。这也会是你的项目文件夹的名称。

      2. Add TypeScript? 是否添加 TypeScript 支持。TypeScript 是 JavaScript 的超集，增加了静态类型检查。对于大型项目或团队协作，强烈推荐使用。对于初学者，可以选择 No 以简化学习过程。

      3. Add JSX Support? 是否添加 JSX 支持。JSX 是一种在 JavaScript 中编写类似 HTML 的语法的扩展。如果你习惯于 React，或者有特定的需求，可以选择 Yes。通常情况下，Vue 的模板语法更常用，可以选择 No。

      4. Add Vue Router for Single Page Application development? 是否添加 Vue Router。Vue Router 是官方的路由管理器，用于构建单页应用 (SPA)。如果你的应用需要多个页面或视图，请选择 Yes。

      5. Add Pinia for state management? 是否添加 Pinia。Pinia 是官方推荐的状态管理库，用于管理跨组件共享的数据。对于中大型应用，这非常有用。对于小型项目，可以先选择 No。

      6. Add Vitest for Unit Testing? 是否添加 Vitest 用于单元测试。Vitest 是一个由 Vite 驱动的极速单元测试框架。

      7. Add an End-to-End Testing Solution? 是否添加端到端 (E2E) 测试方案，例如 Cypress 或 Playwright。

      8. Add ESLint for code quality? 是否添加 ESLint。ESLint 用于检查代码中的语法错误和风格问题，帮助保持代码质量和一致性。

      9. Add Prettier for code formatting? 是否添加 Prettier。Prettier 是一个代码格式化工具，可以自动格式化你的代码，以确保整个项目的代码风格统一。

      完成创建

      选择完所有选项后，create-vue 会在当前目录下创建一个以你的项目名命名的文件夹，并生成所有必要的配置文件。

      接下来，只需按照终端的提示操作即可：

      # 1. 进入项目目录
cd <your-project-name>

# 2. 安装项目依赖
npm install

# 3. 启动开发服务器
npm run dev

      现在，你的 Vue 项目已经成功创建并运行起来了！