从零创建 Vue 3 项目

码农键盘上的梦

已于 2025-02-06 13:28:00 修改

阅读量6.5k

点赞数 26

分类专栏： Vue3 文章标签： vue.js 前端 javascript

于 2025-02-06 13:27:38 首次发布

本文链接：https://blog.csdn.net/qq_44848480/article/details/145471573

版权

Vue3 专栏收录该内容

6 篇文章

订阅专栏

Vue 3 作为当前最流行的前端框架之一，提供了多种创建项目的方式。本文将详细介绍七种常见的创建 Vue 3 项目的方法，涵盖从本地开发到在线编辑器的多种场景，帮助您选择最适合的方式 快速创建 Vue 3项目 进行开发。

方法一：使用 Vue CLI（官方推荐）

Vue CLI 是 Vue.js 的官方命令行工具，适合需要完整生态支持的中大型项目。

1. 安装 Vue CLI

可以通过命令行检测是否已经安装 Vue CLI

打开终端（Windows 用户可以使用 CMD 或 PowerShell，Mac/Linux 用户使用 Terminal），输入以下命令：

vue --version

如果已安装：终端会显示 Vue CLI 的版本号，例如：
```
@vue/cli 5.0.8
```
这表明您已经安装了 Vue CLI，可以直接使用。
如果未安装：终端会提示 command not found 或类似错误信息，说明 Vue CLI 未安装。
可以使用下方命令安装

npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

2. 创建项目

vue create my-vue3-project

3. 选择配置

选择 Vue 3 作为基础框架
手动选择功能（可选）：
- Babel
- TypeScript
- Router
- Vuex
- CSS 预处理器
- Linter/Formatter

4. 启动项目

cd my-vue3-project
npm run serve
# 或使用 yarn
yarn serve

方法二：使用 Vite（推荐新项目）

Vite 是新一代构建工具，由 Vue 核心团队开发，提供极快的开发体验。

1. 创建项目

npm create vite@latest my-vue3-project -- --template vue
# 或使用 yarn
yarn create vite my-vue3-project --template vue

2. 进入项目目录

cd my-vue3-project

3. 安装依赖

npm install
# 或使用 yarn
yarn

4. 启动项目

npm run dev
# 或使用 yarn
yarn dev

方法三：使用 Vue 官方模板

Vue 官方提供了一些模板，适合快速上手和定制化需求。

1. 克隆模板

git clone https://github.com/vuejs/create-vue.git my-vue3-project

2. 进入项目目录

cd my-vue3-project

3. 安装依赖

npm install
# 或使用 yarn
yarn

4. 启动项目

npm run dev
# 或使用 yarn
yarn dev

方法四：使用 StackBlitz（在线编辑器）

StackBlitz 是一个在线代码编辑器，适合快速原型开发和分享。

1. 打开 StackBlitz

访问 StackBlitz。

2. 创建新项目

点击“Create New Project”按钮
选择“Vue”模板

3. 选择 Vue 3

在模板选择页面，选择“Vue 3”模板。

4. 开始编码

项目创建完成后，直接在浏览器中编辑和运行代码。

方法五：使用 CodeSandbox（在线编辑器）

CodeSandbox 是另一个流行的在线代码编辑器，支持 Vue 3 项目。

1. 打开 CodeSandbox

访问 CodeSandbox。

2. 创建新项目

点击“Create Sandbox”按钮
选择“Vue”模板

3. 选择 Vue 3

在模板选择页面，选择“Vue 3”模板。

4. 开始编码

项目创建完成后，直接在浏览器中编辑和运行代码。

方法六：使用 npm init vue（官方脚手架）

Vue 官方提供了一个轻量级的脚手架工具，适合快速创建项目。

1. 创建项目

npm init vue@latest

2. 按提示选择配置

项目名称
是否添加 TypeScript
是否添加 JSX 支持
是否添加 Vue Router
是否添加 Pinia
是否添加 Vitest
是否添加 ESLint
是否添加 Prettier

3. 进入项目目录

cd my-vue3-project

4. 安装依赖

npm install
# 或使用 yarn
yarn

5. 启动项目

npm run dev
# 或使用 yarn
yarn dev

方法七：使用 Nuxt.js（服务端渲染）

Nuxt.js 是一个基于 Vue 的框架，支持服务端渲染（SSR）和静态站点生成（SSG）。

1. 创建项目

npx create-nuxt-app my-vue3-project
# 或使用 yarn
yarn create nuxt-app my-vue3-project

2. 选择配置

选择 Vue 3 作为基础框架
选择需要的功能（如 TypeScript、Pinia、Tailwind CSS 等）

3. 启动项目

cd my-vue3-project
npm run dev
# 或使用 yarn
yarn dev

总结

方法	适用场景	优点	缺点
Vue CLI	中大型项目，需要完整生态支持	功能强大，插件丰富	配置复杂，启动速度较慢
Vite	现代前端项目，追求开发体验	启动速度快，开发体验极佳	生态相对较新
官方模板	快速上手，定制化需求	简单快捷	功能较少
StackBlitz	在线原型开发，快速分享	无需本地环境	依赖网络，功能受限
CodeSandbox	在线开发，团队协作	支持多人协作	依赖网络，功能受限
npm init vue	快速创建项目	官方支持，配置灵活	功能较少
Nuxt.js	服务端渲染，静态站点生成	支持 SSR/SSG，SEO 友好	学习曲线较陡