网页 综合 更新时间 2026-11-13 21:58:07

Vue3 创建项目 | 菜鸟教程

自动蜘蛛 www.runoob.com 正文约 1160 字
在上一章节 Vue3 安装 我们使用了 npm init 命令创建过一个项目,本章节我们主要介绍 npm create 命令创建项目以及使用 vue ui 命令打开图形化的安装界面。
Vue 开发推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展:
Sublime Text 通过 LSP-Volar 支持。
vim / Neovim 通过 coc-volar 支持。
emacs 通过 lsp-mode 支持。
使用 npm create 命令来创建 Vue 项目,通常是通过 Vite(Vue 官方推荐的构建工具)来创建 Vue 应用。
在 Vite 中,npm create 是用来执行脚手架工具(如 vite@latest)来快速生成一个新的项目模板。
Vite 详细内容可以参考:Vite 教程。
npm create 命令创建项目语法格式如下:
npm create :用于执行项目模板的命令,它会创建一个新的项目,并从给定的模板中初始化。
vite@latest :vite 是创建 Vue 3 项目的工具,@latest 是指定使用最新版的 Vite,确保你创建的项目是基于最新版本的 Vite。如果没有 @latest,npm 会尝试使用当前安装的版本。
<project-name>:新创建项目的文件夹名称。命令会创建一个文件夹,并将模板代码放入其中。例如,运行 npm create vite@latest my-vue-app --template vue 会在当前目录下创建一个名为 my-vue-app 的文件夹,并将 Vue 项目的模板文件放入其中。
--template vue:--template vue 指定了要使用的模板类型。Vite 支持多种模板,vue 是专门为 Vue 3 提供的模板。还有其他模板,如 vanilla、react、svelte 等。
接下来我们创建 runoob-vue3-app 项目:
执行以上命令会让你先输入项目名,并选择一个框架:
可以使用方向键来选择,我们选择 Vue,然后出现选项变体界面,我们可以选择 JavaScript 快速开始:
然后打开 http://localhost:5173/,就可以看到应用界面了:
另外我们可以在 vite.config.js 文件中设置自己的端口,比如以下设置端口后为 3000:
除了使用 vue create 命令创建项目,我们还可以使用可视化创建工具来创建项目。
执行以上命令,会在浏览器弹出一个项目管理的界面:
我们可以点击"创建"选项来创建一个项目,选择底部"在此创建项目",页面上方也可以选择路径:
接下来就等待完成安装,安装完成管理界面如下:
访问原文 返回搜索 https://www.runoob.com/vue3/vue3-create-project.html
本页为82搜索生成的网页快照,内容来自站内索引;演示数据的原文链接仅作示例。