【快速上手】使用 Vite 来创建一个 Vue 3项目

文章目录

[1. 前提条件](#1. 前提条件)
[2. 使用 Vite 创建 Vue 项目](#2. 使用 Vite 创建 Vue 项目)
- [第一步：安装 Vite](#第一步：安装 Vite)
- 第二步：进入项目并安装依赖
- 第三步：启动开发服务器
[3. 项目结构说明](#3. 项目结构说明)
[4. 项目开发的基础操作](#4. 项目开发的基础操作)
- [1. 添加新组件](#1. 添加新组件)
- [2. 安装依赖](#2. 安装依赖)
[5. 打包和部署](#5. 打包和部署)
[6. VS Code 配置开发环境（可选）](#6. VS Code 配置开发环境（可选）)
[7. 常用命令总结](#7. 常用命令总结)
[8. 总结](#8. 总结)

1. 前提条件

要开始使用 Vite 创建 Vue 项目，你需要：

安装 Node.js（推荐安装版本 14 或更高），Node.js 会自带 npm（Node 包管理器）。
互联网连接，因为需要下载 Vite 和其他依赖。

验证 Node.js 和 npm 是否已安装

bash 复制代码

node -v
npm -v

如果你没有安装 Node.js，可以从 Node.js 官方网站下载并安装。

2. 使用 Vite 创建 Vue 项目

Vite 是一款快速构建工具，支持现代前端开发，特别适用于像 Vue 这样的框架。以下是如何使用 Vite 创建项目的步骤。

第一步：安装 Vite

首先，确保你已经安装了 npm 或 yarn。然后，你可以使用以下命令创建一个新的项目：

打开终端（在 macOS 中是 Terminal，Windows 中是 CMD 或 PowerShell）。
运行以下命令来使用 Vite 创建 Vue 项目：
bash 复制代码
```
npm create vite@latest my-vue-app
```
这里的 my-vue-app 是项目的名字，你可以自定义这个名字。
之后，Vite 会提示你选择要使用的框架。你可以使用方向键选择 "Vue" 作为你的项目框架：
复制代码
```
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
  react
  preact
  lit
  svelte
  others
```
选择 vue 并按回车确认。
接着它会提示你是否使用 TypeScript：
复制代码
```
? Select a variant: › - Use arrow-keys. Return to submit.
  vue
  vue-ts
```
如果你想要纯 JavaScript 项目，选择 vue；如果你想使用 TypeScript，选择 vue-ts。

第二步：进入项目并安装依赖

进入新创建的项目文件夹：
bash 复制代码
```
cd my-vue-app
```
安装项目依赖项：
bash 复制代码
```
npm install
```
这将根据 package.json 安装项目所需的所有依赖包。

第三步：启动开发服务器

安装完成后，可以通过以下命令启动开发服务器：

bash 复制代码

npm run dev

启动成功后，你会看到终端提示类似这样的输出：

复制代码

VITE vX.X.X  ready in XX ms

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

在浏览器中访问 http://localhost:5173，你就可以看到默认的 Vue 欢迎页面。

3. 项目结构说明

使用 Vite 创建的 Vue 项目有一个基础的项目结构。以下是各个文件和文件夹的详细说明：

index.html: 项目主页面，Vite 使用这个文件来定义应用的根 HTML 内容。在这里可以引用 JavaScript 和 CSS。
src 文件夹: 存放项目源代码。
- main.js: 项目的入口文件，主要用于创建 Vue 实例并挂载到 DOM 中。
- App.vue: 应用的根组件，默认包含了一些模板、样式和基本的逻辑代码。
- assets 文件夹: 存放静态资源，例如图片、字体等。
package.json: 定义了项目的基本信息、依赖项和脚本。通过这里可以管理项目的依赖包，添加新的库等。
vite.config.js: 这是 Vite 的配置文件，用于配置项目开发和构建的参数，例如代理、路径别名等。

4. 项目开发的基础操作

你可以开始在 src 文件夹下的 App.vue 中进行开发，以下是一些基础操作：

1. 添加新组件

在 src/components 中创建一个新的 Vue 组件，例如 HelloWorld.vue：

vue 复制代码

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在 App.vue 中引入这个组件：

vue 复制代码

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

2. 安装依赖

使用 npm 或 yarn 添加其他需要的依赖。例如，如果你想安装 axios 用于请求 API，可以执行：

bash 复制代码

npm install axios

然后你可以在项目中引入它来进行 HTTP 请求。

5. 打包和部署

当你开发完成后，可以将项目打包，以便部署到生产环境：

在终端中执行以下命令打包项目：
bash 复制代码
```
npm run build
```
这将创建一个 dist 文件夹，里面包含了所有构建后的文件。
将 dist 文件夹中的内容上传到你的服务器或托管服务中（例如 Vercel、Netlify、GitHub Pages 等）。

6. VS Code 配置开发环境（可选）

安装插件 : 推荐在 VS Code 中安装 Vetur 或 Volar 插件来支持 Vue 文件的语法高亮和代码补全。
格式化工具 : 可以安装 Prettier 来确保你的代码风格统一。

7. 常用命令总结

启动开发服务器 :
bash 复制代码
```
npm run dev
```
构建生产版本 :
bash 复制代码
```
npm run build
```
本地预览生产版本 （确保在打包后使用）:
bash 复制代码
```
npm run preview
```
这将在本地启动一个服务器，用于预览打包后的应用。

8. 总结

使用 Vite 创建 Vue 项目非常简单，而且 Vite 提供了极快的热重载和开发体验。整个流程概括如下：

安装 Vite 并创建项目。
进入项目目录，安装依赖。
启动开发服务器，开始开发。
打包和部署你的应用。

通过以上步骤，你可以快速创建并启动一个 Vue 项目。随着项目的扩展，你可以添加更多的插件、组件和页面，开发一个功能齐全的 Vue 应用。