vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

一、前提条件

在开始搭建Vue3项目之前，请确保您已经满足了以下前提条件：

1. 熟悉命令行操作。
2. 已安装Node.js（版本16.0或更高）。

您可以通过在命令行中输入node -v和npm -v来检查已安装的Node.js和npm版本。

二、通过create-vue搭建vue3 项目

1. 打开命令行窗口。
2. 导航到您准备搭建Vue3项目的目录。例如，cd C:\00program\vue\vuelearn。
3. 运行以下命令来创建一个新的Vue3项目：npm init vue@latest。这个命令将安装并执行create-vue，它是Vue官方的项目脚手架工具。
4. 根据提示回答问题，以帮助创建项目。例如：

* Project name: 输入您想要的项目名称，如vueproject1。
* Add TypeScript? 选择是否加入TypeScript支持。
* Add JSX Support? 选择是否加入JSX支持。
* Add Vue Router for Single Page Application development? 选择是否为单页应用程序开发添加Vue Router路由管理组件。
* Add Pinia for state management? 选择是否添加Pinia组件来进行状态管理。
* Add Vitest for Unit testing? 选择是否添加Vitest来进行单元测试。

5. 等待项目创建完成。

三、搭建一个 Vite 项目

如果您想直接使用Vite来搭建项目，可以按照以下步骤操作：

1. 打开命令行窗口。
2. 导航到您准备搭建项目的目录。
3. 运行以下命令来初始化一个新的Vite项目：npm init vite@latest。
4. 根据提示选择您需要的模板和配置选项。
5. 等待项目初始化完成。

四、构建一个 Vite + Vue 项目

如果您想结合Vite和Vue来搭建项目，实际上在通过create-vue创建项目时，如果选择了Vite作为构建工具，那么您就已经在构建一个Vite + Vue项目了。create-vue会为您配置好一切所需的环境和依赖。

五、后续步骤

在项目搭建完成后，您可以通过以下命令来启动开发服务器：

1. 进入项目目录：cd your-project-name。
2. 安装项目依赖：npm install。
3. 启动开发服务器：npm run dev。

现在，您应该能够在浏览器中看到您的Vue3项目正在运行了。接下来，您可以开始编写您的Vue3代码，并享受开发的乐趣！