Vue CLI的安装与使用

Vue.js作为当前最热门的前端开发框架，已成为了前端开发者必学的内容之一。但是Vue环境的搭建稍显复杂和繁琐，项目的构建也没那么方便。为了解决这个问题，Vue官方提供了Vue CLI。
Vue CLI是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

1.安装

在安装Vue CLI之前，我们需要先下载Node.js。

下载Node.js.png

Windows和MacOS直接安装，安装选项默认即可:

Windows安装Node.js.png

Linux将压缩包解压，并将安装路径添加到环境变量中。
安装完成后，打开cmd或终端，输入命令node --version，出现版本号就代表成功了：

查看Node.js版本号.png

接着就可以安装Vue CLI了，在cmd或终端输入如下命令:

npm install -g @vue/cli

然后等待安装结束，输入命令vue --version，出现版本号即代表成功。

查看vue版本号.png

如果输入vue命令，出现找不到命令的提示，则通过系统搜索功能搜索“vue”，找到vue命令所在的文件夹：

通过搜索功能找到vue所在位置.png

然后打开命令所在文件夹，将文件夹路径添加到环境变量中:

vue命令所在路径.png

添加环境变量.png

然后打开cmd，就能执行vue命令了。

2.使用

在这里只介绍常用的一些命令，如需要查看更多命令请点击上面的官网链接查看官方文档。
首先是创建项目，通过vue create命令创建:

vue create newProject

除了可以使用命令行管理项目，vue还提供了UI管理界面，通过vue ui可打开UI界面

vue ui

Vue项目管理器.png

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
在项目默认的package.json中，会看到如下字样:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

通过npm run可以调用这些scripts命令:

npm run serve
npm run build

通过npm run serve可建立Web测试环境，实时查看界面效果。
通过npm run build可生成html文件，用于发布到服务器上。