这是我参与「第四届青训营 」笔记创作活动的第14天

前言

在此次的训练营中，我们小组决定使用Vue2来完成最后的项目，所以需要Vue的脚手架来帮助我们完成开发。下面是我在学习Vue脚手架的笔记。

一、Vue脚手架是什么？

1.它是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。

2.vue脚手架通常使用在大型项目中，能够加快我们的开发速度。而小型项目不推荐使用脚手架，因为反而 会拖慢我们项目的开发速度。

二、为什么会有Vue脚手架？

1. 因为 webpack 配置繁琐, 阻止一批想用 vue 但是不会 webpack 的开发人员,所以作者直接将所有 vue 项目中用到的配置全部帮你写好了,这样,就不需要开发人员再去配置基础 webpack 配置项了。

2. 也就是说,使用 vue-cli 这个脚手架工具后,再也不用担心 webpack 配置问题了, 我们前端只需要写 vue 代码, 来实现功能即可。

三、Vue脚手架的基本开发流程

四、具体步骤

全局安装:

npm i -g @vue/cli

查看当前系统的Vue版本:

vue -V

创建项目:b

vue create 项目名称
//ex：vue create my-blog

通过键盘的上下键来选择需要的Vue版本，我这里选择了Vue2版本，选择完毕等待安装即可

进入项目目录，运行启动命令即可：

最终的界面

自定义配置安装:

选择项目中需要安装的插件，键盘上下选择，空格选中、取消，回车下一步

•   -   Choose Vue Version 是否选择安装的脚手架版本,默认会创建 2.0 版本
    -   Babel 是一个 javascript 编译器
    -   TypeScript 支持使用 TypeScript 书写源码
    -   Progressive Web App (PWA) Support PWA 支持。
    -   Router 支持 vue-router 。
    -   Vuex 支持 vuex 。
    -   CSS Pre-processors 支持 CSS 预处理器。
    -   Linter / Formatter 支持代码风格检查和格式化。
    -   Unit Testing 是否单元测试（具体百度）
    -   E2E Testing 是否自动化测试（具体百度）
  

注：如果还没选好配置就摁下了回车，可 Ctrl+D 退出创建