Vue3 创建项目-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

Vue3 教程

Vue3 教程 Vue3 安装 Vue3 项目打包 Vue3 创建项目 Vue3 目录结构 Vue3 起步 Vue3 模板语法 Vue3 条件语句 Vue3 组件 Vue3 计算属性 Vue3 监听属性 Vue3 样式绑定 Vue3 事件处理 Vue3 表单 Vue3 自定义指令 Vue3 路由 Vue3 混入 Vue3 Ajax(axios) Vue3 组合式 API

Vue3 创建项目

在上一章节 Vue3 安装我们使用了 vue init 命令创建过一个项目，本章节我们主要介绍 vue create 命令创建项目以及使用 vue ui 命令打开图形化的安装界面。

vue create 命令

vue create 命令创建项目语法格式如下：

vue create [options] <app-name>

创建一个由 vue-cli-service 提供支持的新项目：

options 选项可以是：

-p, --preset <presetName>：忽略提示符并使用已保存的或远程的预设选项
-d, --default：忽略提示符并使用默认预设选项
-i, --inlinePreset <json>：忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>：在安装依赖时使用指定的 npm 客户端
-r, --registry <url>：在安装依赖时使用指定的 npm registry
-g, --git [message]：强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git：跳过 git 初始化
-f, --force：覆写目标目录可能存在的配置
-c, --clone：使用 git clone 获取远程预设选项
-x, --proxy：使用指定的代理创建项目
-b, --bare：创建项目时省略默认组件中的新手指导信息
-h, --help：输出使用帮助信息

接下来我们创建 runoob-vue3-app 项目：

vue create runoob-vue3-app

执行以上命令会出现安装选项界面：

Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

按下回车键后就会进入安装，等候片刻即可完成安装。

安装完成后，我们进入项目目录：

cd runoob-vue3-app2

启动应用：

npm run serve

然后打开 http://localhost:8080/，就可以看到应用界面了：

vue ui 命令

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

运行命令：

$ vue ui
&#x1f680;  Starting GUI...
&#x1f320;  Ready on http://localhost:8000
...

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

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

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

配置选择默认即可:

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