Vue3创建测试应用几种方式

1、npm创建应用

使用npm init vue@latest命令安装并执行create-vue，它是vue官方的项目脚手架工具。

提示请输入项目名称时，输入自己的项目名称vue3-test即可，其他默认直接回车键。

然后输入以下命令安装相关包。

启动项目，命令如下：

打开网址：

2.图形化界面中创建相关应用

在使用图像话界面前，需要安装相关包，命令如下：npm i -g @vue/cli

启动图形化界面：

3，Vite构建应用

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

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

运行项目

4、npm打包应用

1，进入之前npm创建的应用vue3-test文件夹下执行npm run build命令

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

对于测试应用vue3-test是空白页面，没有样式和图片，就不存在js,css,images等文件夹。

5、Vue3创建项目

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

默认回车选项

进入应用并启动应用：

cd vue3-app
npm run serve

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

注意：这里的应用和项目不同，使用npm run dev命令可以在开发环境或生产环境中运行，具体取决于项目的配置和定义。它可以执行各种开发相关的任务，无论是在开发过程中辅助开发，还是在构建和部署最终的产品或应用时使用。如package.json文件中的"scripts"字段:

而npm run serve命令是在开发环境中运行，用于提供开发服务器和实时的开发体验。支持自动重新加载和热模块替换。这样可以在开发过程中实时查看代码更改的效果。如package.json文件中的"scripts"字段: