Vue入门系列 之 使用Vue Cli搭建第一个项目

Vue Cli安装

官方教程：安装 | Vue CLI

全局安装Vue Cli：npm install -g @vue/cli

查看版本命令：vue -V         @vue/cli 5.0.4

创建项目

官方教程：创建一个项目 | Vue CLI

使用命令创建项目

命令格式：vue create [options] <app-name>
可以使用命令：vue create --help 查看有哪些选项。

使用默认配置创建项目：vue create -d vue-cli-start

创建成功后会提示：

打开项目根目录看下项目结构：

 运行项目：npm run serve

表明项目已经成功运行起来，打开链接看下结果：

可以看出，使用Vue Cli提供的默认配置，可以很容易地创建一个应用。

到这里第一个应用已经成功运行起来。

使用图形化界面创建项目 

打开图形化界面命令：vue ui

点击“创建”，进入创建页面

指定项目路径，并点击“选定”
 

输入项目名，并点击“下一步”
 

选中“Default (Vue 3) ”，点击“创建项目”，等待项目创建完成

创建完成后，如下： 

 运行项目：

至此，通过图形化界面创建项目已经成功，用VS Code打开项目，和通过命令创建的项目结构是一致的。

由于刚开始接触Vue，对Vue还太了解，通过使用默认配置可以快速完成项目的搭建，至于其它选项，后面在学习的过程中再去了解，先基于使用默认配置创建的项目进行学习，这对初学者来所已经足够了。