1. 什么是Vue-cli
Vue-cli是Vue.js官方提供的一种标准的脚手架构建工具，可以快速搭建Vue.js单页面应用（SPA）或者多页面应用（MPA），提供了Web开发中常用的开发工具链，包括webpack、Babel、ESLint、PostCSS、Test Utils等,还提供了像vue-router、vuex等常用的Vue插件集成。而在使用Vue-cli的过程中，换句话说它实际上是一个Vue项目的模版库，它提供了一个标准的Vue.js开发模板，让我们可以直接拿来作为Vue项目的基础架构，省去了从零开始配置Vue项目的繁琐。
2. 如何安装Vue-cli
2.1 Node.js npm的安装
Vue-cli是基于Node.js的npm包管理器运行的，所以首先要安装Node.js和npm。Node.js的下载地址为https://nodejs.org/，下载后双击安装即可，途中如果有设置PATH的选项可以选择勾选，可以加入环境变量，方便直接在终端中使用Node.js相关命令。
安装成功后打开终端执行以下命令检查Node.js和npm是否安装成功：
node -v
npm -v
如果能成功输出node.js和npm的版本号，表示安装成功。
2.2 Vue-cli的安装
Vue-cli的安装比较简单，只需要在终端中执行以下命令即可：
npm install -g vue-cli
这个命令会在全局安装vue-cli命令，安装完成后可以用vue -V命令检查Vue-cli的版本号
vue -V
3. 使用Vue-cli创建Vue.js项目
在安装Vue-cli之后，我们就可以通过它提供的命令行工具来快速创建Vue.js项目了，创建Vue.js项目有两种方式。
3.1 Vue-cli2.x脚手架搭建
在终端中输入以下命令：
vue init webpack my-project
其中“my-project”是项目名称，执行这个命令之后会根据模板配置构建项目。该命令会询问一些基本的配置信息，如模块化开发方式、开发语言等等，我们可以自行选择，然后在项目根目录执行：
npm install
npm run dev
运行成功后可以使用浏览器访问http://localhost:8080/
3.2 Vue-cli3.x脚手架搭建
Vue-cli3.x相比Vue-cli2.x改动较大，其中一个显著的变化是：将原来的webpack配置从项目中剥离出来，使用了基于webpack-chain的新的配置形式，并引入了一些插件。 在终端中使用以下代码创建新项目：
vue create my-project
其中“my-project”是项目名称，执行该命令后会弹出一个设置界面，我们依据需要自行选择即可。这里建议选择手动选项，然后再按需选择应用插件和配置。
4. Vue-cli3.x的常用命令
1. 启动项目
npm run serve
2. 构建项目
npm run build
3. 格式化代码
npm run lint
4. 添加插件
vue add plugin-name
5. 使用Vue-cli创建组件
让我们来学习使用Vue-cli创建单文件组件的方法。首先，我们需要创建.vue文件才能添加组件，文件名是template.vue。在此文件中，编写如下代码：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
}
}
}
</script>
<style>
div {
color: red;
}
</style> >
然后，我们把该文件保存到src/components文件夹中，组件定义完毕。至此，我们已经完成了一个单文件组件的创建。在组件中添加到需要组合它的父亲组件中即可
<template>
<div class="container">
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from '@/components/my-component.vue'
export default {
components: {
MyComponent
}
}
</script>
好啦！以上是一篇Vue-cli的使用方法指南，希望对你有所帮助。在工作中我们还需要自己不断尝试，不断摸索，不断改进，并运用到实践中，才能让自己得到进一步的提升。