今天主要介绍用Vue3创建项目的四种方法：

1、最基本的创建Vue3项目方法

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

然后一步一步做下去即可。

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

$ cd runoob-vue3-test
$ npm install
$ npm run dev
  VITE v4.3.4  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

成功执行以上命令后访问 http://localhost:5173/，输出结果如下所示：

 

2、用npm create方法

npm create vite@latest

执行以上命令会让你先输入项目名，并选择一个框架：

> Project name: … runoob-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite 支持多个模板，常见的有：

• vue: Vue 3 项目（默认使用 Vue 3）
• vanilla: 无框架的基本模板
• react: React 项目
• svelte: Svelte 项目
• preact: Preact 项目
• 还可以根据具体需求选择其他模板。

可以使用方向键来选择，我们选择 Vue，然后出现选项变体界面，我们可以选择 JavaScript 快速开始：

> Project name: … runoob-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/runoob/runoob-test/runoob-vue3-app...

Done. Now run:

  cd runoob-vue3-app
  npm install
  npm run dev

 

3、用Vite创建Vue3项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目，语法格式如下：

npm init vite-app <project-name>

创建项目 runoob-vue3-test2：

$  npm init vite-app runoob-vue3-test2

运行项目:

$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev
> runoob-vue3-test2@0.0.0 dev /Users/runoob/runoob-test/vue3/runoob-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

打开 http://localhost:3000/，显示如下：

4、vue ui 命令

除了使用 vue create 命令创建项目，我们还可以使用可视化创建工具来创建项目。

运行命令：

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

执行以上命令，会在浏览器弹出一个项目管理的界面：

我们可以点击"创建"选项来创建一个项目，选择底部"在此创建项目"，页面上方也可以选择路径：

然后输入我们的项目名称，选择包管理工具为 npm，然后点击下一步：

配置选择默认即可:

接下来就等待完成安装，安装完成管理界面如下：