构建使用 Vite 和 Vue 的项目

构建一个使用 Vite 和 Vue 的项目是一项非常实用且快速的方式，能够帮助开发者迅速搭建起一个现代前端应用的基础架构。以下是根据您提供的信息整理出的一个详细的步骤指南，用于指导如何从零开始创建一个 Vite + Vue 项目。

准备工作

确保您的计算机已经安装了 Node.js。您可以通过运行 node -v 和 npm -v 命令来检查是否已正确安装 Node.js 和 npm。

创建项目

使用 npm 创建项目

根据您的 npm 版本，使用相应的命令创建新的 Vite + Vue 项目：

• 对于 npm 6.x:

  npm create vite@latest my-vue-app --template vue

• 对于 npm 7+:

  npm create vite@latest my-vue-app -- --template vue

使用 yarn 创建项目

如果您更喜欢使用 yarn，也可以通过以下命令创建项目：

yarn create vite my-vue-app --template vue

选择框架和变体

在执行上述命令后，系统会提示您选择一个框架和一个变体。由于我们的目标是创建一个基于 Vue 的项目，所以请选择 Vue 作为框架。然后，选择您偏好的变体，这里我们选择了 TypeScript。

安装依赖并启动开发服务器

项目创建完成后，进入项目目录，并安装所需的依赖：

cd my-vue-app
npm install

安装完成后，启动开发服务器：

npm run dev

访问项目

一旦开发服务器启动成功，您应该会在终端看到类似于以下的信息：

  VITE v4.2.0  ready in 294 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

在浏览器中访问 http://localhost:5173/，您应该能看到新创建的 Vite + Vue 项目的欢迎页面。

项目目录结构

一个典型的 Vite + Vue 项目目录结构可能如下所示：

my-vue-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

每个文件夹的作用如下：

• node_modules: 存放项目依赖的第三方模块。
• public: 存放公共资源文件，如 favicon、manifest 等。
• src: 项目的源代码目录，包括组件、路由、状态管理等。
• assets: 存放静态资源文件，如图片、样式表等。
• components: 存放可复用的 Vue 组件。
• router: 配置 Vue Router，用于管理应用的路由。
• store: 使用 Vuex 进行状态管理的文件。
• views: 应用的主要页面组件。
• App.vue: 应用的根组件。
• main.js: 应用的入口文件，负责初始化 Vue 实例。
• index.html: 项目的 HTML 模板文件。
• vite.config.ts: Vite 构建配置文件。

使用 Vue 项目管理器

如果您希望通过图形界面来管理 Vue 项目，可以尝试使用 Vue CLI 提供的项目管理器。虽然 Vite 并不是基于 Vue CLI 构建的，但如果您已经安装了 Vue CLI，仍然可以使用 vue ui 命令来打开项目管理器。

vue ui

这将启动一个本地服务，并在浏览器中打开项目管理器界面。

以上就是创建和运行一个基本的 Vite + Vue 项目的完整过程。希望这些信息对您有所帮助！如果有任何疑问或遇到问题，欢迎随时提问。