vue脚手架的搭建

我们学完vue最核心的内容组件之后，我们来了解一下vue脚手架的内容。

什么是脚手架

脚手架就是一个用于快速搭建项目的骨架，对项目所依赖的配置进行初始化的工具。我们利用这个工具可以自动生成一个基于Vue.js的单页面应用的脚手架项目

关于脚手架

在Vue.js中，这个脚手架就是Vue CLI。在最新版本中，Vue CLI有三个组件：

1. CLI(@vue/cli )：全局安装的npm包，提供了终端里的vue命令。
2. CLI服务(@vue/cli-service)：CLI服务是一个开发环境依赖。它是一个npm包，本地安装到@vue/cli 创建的每一个项目中。
3. CLI插件：CLI插件是给Vue项目提供可选功能的npm包（如Babel/TypeScript转译，ESLint集成、单元测试等）。CLI插件的名字以@vue/cli-plugin-(用于内置插件)开头。

脚手架的安装

1. 首先需要保证已经安装了Node.js 8.9或更高版本
2. 然后判断是否已经全局安装了旧版本的vue-cli(1.x或2.x)。如果安装了，则使用npm uninstall vue-cli -g进行卸载；如果没有安装则忽略这步
3. 然后通过命令npm install -g @vue/cli安装CLI。在安装过程中需要注意如果网速过慢等原因会导致安装失败
4. 在安装成功之后，可以通过vue -version指令验证是否安装成功和查看当前Vue CLI版本

创建项目

1. 在文件夹中通过 shift+右键，打开cmd窗口。

2. 输入命令vue ui或者vur create 项目名。在下面案例中我们通过vue ui创建项目，输入完成之后浏览器会自动打开一个界面。

3. 通过ui打开图形界面之后，选择在此创建新项目，开始创建新项目
   

4. 点击在此处创建新项目之后，就会进入项目详情，详情里面，首先填写项目的名字，然后包管理器选择yarn，在填写初始会git默认注释
   

5.上面填写完毕后，点击下一步，会进入到选择默认配置还是手动配置，以及选择之前的预设。之前的预设只有在手动配置之后进行保存且命名之后才会存在。

6.选择完后继续点击下一步，选择功能，以下是所有功能介绍，

• babel （js高级转低级）

• TypeScript （js超级）

• Progressive Web App (PWA) Support （渐进式web应用）

• Router（路由）

• Vuex（状态管理工具）

• CSS Pre-processors（css预处理）

• Linter / Formatter（语法规范检查）

• Unit Testing、E2E Testing（测试方式）

• 使用配置文件（配置项是存在单独配置文件）

7. 上面选择完后，继续点击下一步会进入到配置选项

8.在完成以上所有操作之后，点击下一步会弹出是否保存为预设。如果想要保存则命名且选择保存预设并创建项目

以上就是通过ui创建的所有过程，通过vur create 项目名创建项目的过程差不多类似，唯一不同的是通过文字进行显示的！！！！！