用Vue CLI工具创建一个vue应用

安装@vue/cli

如果以前没有全局安装过@vue/cli，要先安装这个组件。

在cmd窗口执行命令npm install -g @vue/cli：

安装完成后，用npm ls -g命令看看：

从输出来看，已经安装了@vue/cli 5.0.8版本。

下面来验证下能不能用。
在cmd窗口简单输入vue，看看有没有输出。我输入vue，说不是合法的命令。但我在npm的本地全局仓库中，是可以看到vue.cmd文件的：

这说明找不到路径，于是，我把vue.cmd所在的路径（也就是npm全局仓库的路径）加入系统的Path环境变量中：

然后在cmd下输入vue，输出了帮助信息：

输入vue --version，也输出了正确的信息:

这样@vue/cli就安装成功了。

创建一个vue3应用

例如，我的项目的名称为vue3-demo，输入 vue create vue3-demo，出现如下提示：

我选择第一个Default，即Vue 3，然后回车，出现如下提示：

等待一会儿，创建完成：

完成以后，提醒要运行这个应用，需要切换到项目目录下面（cd vue3-demo），然后运行npm run serve，出现如下提示：

到浏览器中访问http://localhost:8080/

到vscode中打开工程的目录，看看项目布局：

到cmd窗口，在应用的目录下面，执行npm list，看看用到了哪些组件：