手动搭建 Vue 3 + Vite 项目
概述
通常我们都是通过Vue CLI脚手架来进行项目搭建，当然！除了这样，还可以通过自己手动搭建一个Vue3 + Vite 的项目。
文章目录
- 概述
- 步骤1：安装 Node.js 和 npm
- 步骤2：创建项目目录
- 步骤3：初始化项目
- 步骤4：安装 Vue 3 和 Vite
- 步骤5：创建 Vite 配置文件
- 步骤6：创建 Vue 3 应用
- 步骤7：创建 Vue 3 组件
- 步骤8：创建 index.html
- 步骤9：启动开发服务器
- 步骤10：构建生产版本
- 步骤11：部署应用
- 常见错误
步骤1：安装 Node.js 和 npm
确保你的系统中已经安装了 Node.js（建议使用最新版本）和 npm（Node.js 包管理器）。你可以从 Node.js 官方网站（https://nodejs.org/）下载并安装。
步骤2：创建项目目录
在你的工作目录中创建一个新的文件夹，用于存放你的 Vue 3 + Vite 项目。
步骤3：初始化项目
在项目目录中打开终端，并运行以下命令，初始化一个新的 npm 项目：
npm init -y
这将创建一个默认的 package.json 文件，用于管理你的项目的依赖和配置。
步骤4：安装 Vue 3 和 Vite
运行以下命令，安装 Vue 3 和 Vite 作为项目的开发依赖：
npm install vue@next vite --save-dev
这将在你的项目中安装 Vue 3 和 Vite，并将它们添加到 package.json 文件的 devDependencies 中。
步骤5：创建 Vite 配置文件
在项目根目录下创建一个 vite.config.js 文件，用于配置 Vite 构建工具。可以参考以下示例：
// vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue()]
})
步骤6：创建 Vue 3 应用
在项目目录中创建一个 src 文件夹，用于存放你的 Vue 3 应用的源代码。在 src 文件夹中创建一个 main.js 文件作为 Vue 3 应用的入口文件。
在 main.js 文件中，可以编写 Vue 3 应用的代码。例如：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
步骤7：创建 Vue 3 组件
在 src 文件夹中可以创建 Vue 3 的单文件组件（.vue 文件）来定义你的页面组件。例如，在 src 文件夹中创建一个 App.vue 文件，作为 Vue 3 应用的根组件。在 App.vue 文件中，可以编写 Vue 3 组件的代码，包括模板、样式和逻辑。
步骤8：创建 index.html
如果没有创建 index.html 文件，也可能导致在运行 npx vite 后出现 404 错误。在 Vue 3 + Vite 项目中，index.html 文件是应用的主 HTML 文件，用于加载 Vue 3 应用的入口文件和其他资源。
请确保在项目的根目录下创建一个 index.html 文件，并在其中添加以下基本内容：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Vue Apptitle>
head>
<body>
<div id="app">div>
<script src="/src/main.js">script>
body>
html>
步骤9：启动开发服务器
运行以下命令，启动 Vite 的开发服务器，用于在本地开发和调试 Vue 3 应用：
npx vite
这将在默认的端口上启动一个开发服务器，可以通过浏览器访问查看 Vue 3 应用。
步骤10：构建生产版本
当你准备好将 Vue 3 应用部署到生产环境时，可以运行以下命令，构建生产版本的应用：
npx vite build
这将在项目根目录下生成一个 dist 文件夹，其中包含了生产版本的 Vue 3 应用的静态文件，包括 JavaScript、CSS 和其他资源文件。
步骤11：部署应用
将生成的 dist 文件夹中的静态文件部署到你的服务器或者静态文件托管服务上，以发布 Vue 3 应用到生产环境。
以上就是手动搭建 Vue 3 + Vite 项目的基本步骤。你可以根据你的需求和项目的具体情况进一步配置 Vite 和编写 Vue 3 应用的代码。希望这对你有所帮助！
常见错误
在手动搭建 Vue 3 + Vite 项目时，可能会遇到以下一些常见错误：
- 404 错误：在运行
npx vite后，浏览器访问页面时出现 404 错误。这可能是因为 Vite 没有找到有效的入口文件或其他资源文件。解决方法包括：
- 确保在项目根目录下创建了
index.html文件，并正确配置了入口文件路径。 - 检查 Vite 的配置文件
vite.config.js中的base配置项，确保其值为/，以便正确加载资源文件。 - 检查入口文件路径和文件名是否与 Vite 的默认规则一致，或者在
vite.config.js文件中进行配置。
- Vue 相关错误：在 Vue 3 应用中可能会出现 Vue 相关的错误，如 Vue 组件无法正常加载、Vue 指令无效等。解决方法包括：
- 确保 Vue 3 相关的依赖包已经正确安装，并在入口文件中使用
createApp方法创建 Vue 3 应用并将其挂载到 DOM 上的元素上。 - 检查 Vue 组件的导入和使用是否正确，包括组件路径、组件名称、组件注册等。
- 检查 Vue 指令的使用是否正确，包括指令名称、指令参数、指令修饰符等。
- Vite 相关错误：在 Vite 配置中可能会出现错误，如插件无法正常加载、文件无法正确解析等。解决方法包括：
- 确保 Vite 相关的依赖包已经正确安装，并在
vite.config.js文件中配置了正确的 Vite 配置，如别名、文件解析等。 - 检查 Vite 插件的安装和配置是否正确，确保插件与 Vue 3 和 Vite 版本兼容。
- 检查文件路径和文件名是否与 Vite 的默认规则一致，或者在
vite.config.js文件中进行配置。
- 其他错误：还可能会出现其他与项目结构、文件权限、环境配置等相关的错误。解决方法包括：
- 检查项目结构是否按照 Vue 3 + Vite 的要求进行设置，包括入口文件、组件文件、静态资源文件等的位置和命名。
- 检查文件权限是否正确设置，确保文件和文件夹对于当前用户是可读可写的。
- 检查环境配置是否正确，如 Node.js、npm/yarn 版本是否兼容，并且网络连接是否正常。
在解决错误时，可以参考 Vue 3 和 Vite 的官方文档，查找错误信息，逐步排查错误并进行修复。如果问题复杂或无法解决，请向社区或