当前位置：首页 > article >正文

vue3教程：快速搭建Vue3项目

article 2024/11/27 22:02:12

一、准备工作

安装Node.js和npm
- 确保你的计算机上安装了Node.js和npm。你可以从Node.js官方网站下载并安装最新版本的Node.js。安装过程中，npm会随Node.js一起安装。
检查Node.js和npm版本
- 打开命令行终端，输入以下命令来检查Node.js和npm的版本：
```
node -v
npm -v
```
- 确保Node.js的版本是v16.20.0或更高版本，因为Vue 3项目需要这个版本的Node.js支持。

二、创建Vue 3项目

运行创建项目命令
- 在命令行终端中，导航到你希望存放项目的目录，然后运行以下命令来创建一个新的Vue 3项目：
```
npm create vue@latest
```
- 这条命令会启动一个交互式向导，帮助你设置项目。
配置项目选项
- 在向导过程中，你会被提示选择一系列选项来配置你的项目。这些选项可能包括：
  - 项目名称
  - 是否添加TypeScript支持
  - 是否添加JSX支持
  - 是否添加Vue Router进行单页应用开发
  - 是否添加Pinia进行状态管理
  - 是否添加Vitest进行单元测试
  - 是否添加端到端测试解决方案（如Cypress）
  - 是否添加ESLint进行代码质量检查
- 你可以根据自己的需求选择相应的选项。如果不确定某个选项的作用，通常可以选择默认值（通常是“No”）。
安装依赖
- 配置完成后，npm会自动安装项目所需的依赖。这个过程可能需要一些时间，具体取决于你的网络速度和依赖包的数量。
进入项目目录
- 安装完成后，命令行终端会提示你进入项目目录。通常，项目目录的名称与你在向导中设置的项目名称相同。你可以使用cd命令进入项目目录：
```
cd your-project-name
```

三、启动开发服务器

安装项目依赖
- 进入项目目录后，你可能需要手动运行以下命令来安装项目依赖（尽管在大多数情况下，npm create vue@latest命令已经为你完成了这一步）：
```
npm install
```
启动开发服务器
- 安装依赖完成后，你可以运行以下命令来启动开发服务器：
```
npm run dev
```
- 启动成功后，开发服务器会在本地启动一个Web服务器，并监听一个端口（通常是5173）。你可以在浏览器中访问http://localhost:5173来查看你的Vue 3项目。

四、项目结构和文件说明

创建一个新的Vue 3项目后，你会得到一个具有预定义结构的项目文件夹。以下是一个典型的Vue 3项目结构：

your-project-name/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md

node_modules/：存放项目的依赖包。
public/：存放静态资源，如index.html入口文件。
src/：存放项目的源代码。
- assets/：存放静态资源，如图片、字体等。
- components/：存放Vue组件。
- App.vue：根组件。
- main.js：项目入口文件。
.gitignore：指定Git忽略的文件和目录。
babel.config.js：Babel配置文件，用于将ES6+代码转换为兼容旧版浏览器的代码。
package.json：项目配置文件，包含项目依赖、脚本等信息。
README.md：项目说明文件。