详解Vue-cli

本文目录：

1.什么是脚手架工具
1. 什么是Vue-cli
3.安装工具
4.基于3.x创建vue项目
5.项目的自定义配置

1.什么是脚手架工具

从百度百科摘抄过来的一段话：脚手架是为了保证各施工过程顺利进行而搭设的工作平台。如果明白了脚手架在现实生活中的作用，那么，再来理解编程中的脚手架就容易了，有时我们听说前端脚手架工具，其实，这里的脚手架和现实中的脚手架类似，用人话讲就是一种工具，工地上的脚手架帮助工人施工，前端中的脚手架帮助编程人员完成各种工作，例如：代码编译、打包、压缩等，各种工具组合成一套编码环境，这种自己一步一步搭建环境的重复性劳动可以交给给脚手架工具来完成，你只需要在这种脚手架工具上完成自己的业务代码就行，下面我们会介绍到等vue-cli就是集成了vue的一种脚手架工具，同理，react、angular等都有相应的脚手架工具，例如：create-react-app、angular-cli等

2. 什么是Vue-cli

在没有vue-cli之前，搭建一个开发环境你可能需要花几天的时间，如果你并不熟悉webpack的话，你还得再去把webpack的各种配置学习一遍，这样几天时间很快就过去了，而你还没有真正动手开始写自己的应用逻辑，为了让开发者从配置中解放出来，vue官方提供了一套vue-cli脚手架，它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接，还提供了配置调整的灵活性。有了vue-cli之后，你就可以专注于自己项目的业务逻辑的编写了。

从官方网站这样介绍：
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

3.安装工具

如果从来没有使用过vue-cli，首先需要安装一下
npm install -g vue-cli
查看当前vue-cli的版本
vue --version或者vue --V
注意：上面所有的通过npm install -g vue-cli安装vue-cli的方式，安装的版本最高只能是2.9.6，3以后的版本已不支持通过上面的这种方式进行安装了，升级方法：
1.首先需要卸载老版本
npm uninstall vue-cli -g
经过实际操作验证，仅仅是上面这种卸载还不行，必须要去安装目录中把安装文件全部手动删除才行，也可以在下面的安装指令的后面加上--force来强制清除老版本，安装新版本
npm install @vue/cli -g --force
接下来再通过vue --V查看，就会是最新的版本了。

4.基于3.x创建vue项目

需求：创建一个项目（myProject）
通过vue-cli创建项目通常有以下三种方式：
1.基于交互式命令行的方式，创建新版的vue项目
vue create my-project
2.基于图形化界面的方式，创建新版的vue项目
vue ui
3.基于2.x版本的旧模板，创建旧版的vue项目
npm install -g @vue/cli-init
vue init webpack myProject
通常情况下我会选用第一种方式
输入指令后，会出现一个交互式回答界面
接下来命令行工具会有一些选项需要我们进行选择，按需选择即可。
接下来可以在项目根目录下运行
npm run serve
这时候就可以在本地访问项目了

2.x版本项目文件介绍

项目下的文件夹：
build 存放webpack相关的配置文件
config 存放生产环境和开发环境的相关配置文件
node_modules 存放第三方依赖包
src 做项目的时候写的源码
static 放置一些第三方的资源，这个文件夹下的.gitkeep的作用是让git能提交空文件夹，如果没有这个文件，空文件夹是没办法提交的
项目下的文件：
.babelrc 这个是babel的配置文件
.editorconfig 编辑器配置文件
.eslintignore 设置代码检查的时候忽略的文件
.eslintrc eslint的配置文件
.gitignore 在使用git提交项目的时候，忽略一些文件

3.x版本项目文件介绍

node_modules 存放第三方依赖包
public 放置一些第三方的资源，相当于2.x版本的static文件夹
src 做项目的时候写的源码

5.项目的自定义配置

1.通过package.json配置项目
注意：json文件的代码必须要符合规范的json语法并且不能有注释

"vue":{
  "devServer":{
    "port":"8888",
    "open":true
  }
}

不推荐使用这种配置方式。因为package.json主要是用来管理包的配置信息，为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。
2.通过单独的配置文件配置项目
①在项目的根目录创建文件vue.config.js
②在该文件中进行相关的配置，从而覆盖默认配置

module.exports = {
  devServer:{
    port:8888,
    open:true
  }
}

接下来，我们就可以快乐的进行项目开发了。

vue工程化（cli）项目中如何进行webpack配置？
vue inspect > output.js 可以检查vue cli工程项目中webpack配置，不能修改
修改的话，要通过工程目录下的vue.config.js