前端vue开发为什么要使用脚手架

      软件开发的脚手架的概念是从建筑学术语上引申而来。在建筑学上，脚手架指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。你见过大楼施工吧？在大楼外墙围的那圈支架就是其中一种脚手架。

      而在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

        Vue Cli 就是Vue工程的脚手架，是Vue官方提供方便的项目搭建工具，帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装，让我们不需要为了编辑或者一些其他事情浪费时间。

        总而言之，就是快速搭建项目的，让我们可以早点去写代码。

Vue cli3.0+的简单搭建

1.安装

1.1 首先全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它

        npm uninstall vue-cli -g //或者 yarn global remove vue-cli

1.2 Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+）

1.3 安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

        npm install -g @vue/cli //yarn global add @vue/cli

2. 使用

2.1 新建项目

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

新建项目

default（babel，eslint）：默认设置，非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

Manually select features：自定义配置，是我们所需要的面向生产的项目，提供可选功能的 npm 包

根据自己公司的技术栈选择相应的选项，因为我们工程都是一些小的h5工程，所以没有必要用TypeScript，在这里就没有选择。

我是个颜值党，对于自己工程的URL上面还带#的hash模式是真的忍不了，我选择history模式。

选择less、scss还是stylus都可以，不会还有人用css吧0.0

工程目录

真香！

3. Vue cli 3.0 目录结构

babel.config.js : 配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

vue-cli升级到3之后，减少了很多的配置文件，将所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用vue.config.js文件很重要。

.browserslistrc: 指定了项目的目标浏览器的范围

注意： vue cli3.0虽然很方便，但是我们缺少了一个很重要的东西，那就是vue相关的全局配置文件，很坑，我们需要自己手动去引入 vue.config.js

4. Vue cli 3.0 的细节

vue.config.js

Vue Cli 3.0+的配置基本就到这里了。