使用Vue CLI方式创建Vue3.0应用程序

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。新版本的 Vue CLI 的包名由原来的 vue-cli 改成了 @vue/cli。

在开发大型项目时，需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作，工作效率会非常低。为此，Vue.js 官方提供了一款脚手架生成工具  Vue CLI，通过该工具可以快速构建项目，并实现一下项目的初始配置。

创建 Vue 应用程序的三种方式：

《使用CDN方式创建Vue3.0应用程序》

《使用NPM方式创建Vue3.0应用程序》

《使用Vue CLI方式创建Vue3.0应用程序》

1、Vue CLI 的安装

Vue CLI 是应用 node 编写的指令行工具，如果没有安装 node 可以参考本博文：《Node.js和npm的安装及配置》

需要进行全局安装，如果想安装它的最新版本，指令如下：

npm install -g @vue/cli

说明：

如果想安装 @vue/cli 的指定版本，可以添加安装的版本号。例如：npm install -g @vue/cli5.0.8

安装完成之后，可以在指令行中执行如下指令来检查版本是否正确，并验证 Vue CLI 是否安装成功：

vue --version

执行结果如下：

注意：Vue CLI 需要计算机连接互联网才能安装成功。

2、使用 Vue CLI 创建 Vue 应用程序

使用 Vue CLI 创建项目有两种方式，一种是使用 vue create 指令进行创建，另一种是通过 vue ui 指令启动图形界面进行创建。

2.1 使用 vue create 指令

打开一个新的cmd窗口（按快捷键“Win+R”，输入“cmd”） 

（1）通过 cmd 指令，进入要创建项目的目录

e:            -- 进入E盘
cd /Vue学习   -- 进入我的项目目录

（2）创建 Vue 项目的指令（重点）

在命令提示符窗口中，选择好项目的存储目录后。使用 vue create 指令创建一个名称是 myapp 的项目（注意：项目名称必须小写）。输入如下指令：

vue create myapp

 执行结果如下：

2.2 项目的配置选项

执行指令后，会提示选择一个 preset（预设）。一共有3个选项，前两个选项是默认设置，适合快速创建一个项目的原型。第3个选项“Manually select features”需要手动对项目进行配置。这里使用方向键↓选择“Manually select features”选项。

按 Enter 键，此时会显示项目的配置选项，通过键盘中的上下方向键进行移动，应用空格键进行选择，这里保持默认的 Babel 和 Linter / Formatter 的选中状态。

这些配置选项的说明如下表：

选项	说明
Babel	转码器，用于将 ES6 代码转换为 ES5 代码
TypeScript	微软开发的开源编程语言，编译出来的 JavaScript 可运行于任何浏览器
Progressive Web App （PWA）Support	支持渐进式 Web 应用程序
Router	路由管理
Vuex	Vue 的状态管理
CSS Pre-processors	CSS 预处理器（如 Less）
Linter / Formatter	代码风格检查和格式校验
Unit Testing	单元测试
E2E Testing	端到端测试

按 Enter 键，此时会提示选择项目中使用的 Vue 的版本，这里选择默认的 3.x 版本。

按 Enter 键，此时会提示选择代码格式和校验选项的配置。第一个选项是指 ESLint 仅用于错误预防，后三个选项是选择 ESLint 和哪一种代码规范一起使用，这里选择默认选项。

按 Enter 键，此时会提示选择代码检查方式，这里选择默认选项“Lint on save”（保存时检测）。

按 Enter 键，此时会提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息，第二个选项是将配置信息存储在 package.json 文件中，这里选择第一个选项。

按 Enter 键，此时会询问是否保存当前的配置。如果选择了保存，以后再创建项目时，就会出现保存过的配置，这里输入 N 表示不保存。

2.2 启动项目

根据提示在指令提示符窗口中输入指令 cd myapp 切换到项目目录，然后输入指令 npm run serve 启动项目。

项目启动后，在浏览器中访问：http://localhost:8080/，生成的页面如下：

说明：

要终止项目的运行，在指令提示窗口中按 Ctrl + C 组合键即可。