一文带你快速使用Vue脚手架创建启动Vue项目！
本篇文章主要带你了解一下什么是前端工程化，并带你快速使用Vue脚手架创建和启动Vue项目。
一、Ajax
1、概述
Ajax（Asynchronous JavaScript And XML），即异步的JavaScript和XML。
2、作用
1）数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
2）异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等。
注：同步与异步的区别，如下
3、原生Ajax（了解）
二、Axios
1、 简述
Axios对原生的Ajax进行了封装，简化书写，快速开发。
中文官网：https://www.axios-http.cn/
2、 使用步骤
1）步骤如下
2）通过Axios请求方式别名发起get和post请求（推荐）
三、前端工程化
所谓前端工程化，是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
1、概述
1.1 前后端分离开发方式（了解）
1.2 YApi (接口文档管理平台)
1）简述
YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
官网：https://yapi.pro/
使用文档：https://hellosean1025.github.io/yapi/
注册登录进去后如下，会有指引提示，不懂的也可以查看使用文档。
2）演示使用
2.1）添加项目
2.2）添加分类
在添加接口前先添加分类，便于对接口进行管理，比如要对用户的接口进行管理，可以添加一个用户管理的分类，如下。
2.3）添加接口
2.4）编辑完善
添加完成后，点击编辑，编辑如下。
a、请求参数设置
b、返回数据设置
设置返回参数，即未来前端人员在调用这个接口的时候返回数据的格式是怎么样的。可以设置返回一个json格式的数据，如下
并为各字段添加备注信息，完成后点击保存即可
c、点击预览查看
推荐下载一个插件：FeHelper，能够json自动格式化
接口管理好以后，会自动生成一个Mock地址，将来前端人员在测试时就可以直接访问该地址，会自动生成Mock测试数据。
注：Mock 是模拟真实 API 请求的一种方式，广泛应用于对接和测试。
如下，可以看出返回的数据不太好看
可以点击高级Mock，添加我们期望返回的数据。
再次访问Mock地址时，就会按我们添加的期望数据返回测试数据。
因为我设置的是开放的，所有人都能访问该Mock地址，如下
Mock地址：https://yapi.pro/mock/290026/user/getById
2、环境准备
2.1 Vue-cli（Vue脚手架）
1）简述
Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
2）功能
Vue-cli提供了如下功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：Nodejs
2.2 Nodejs安装配置
1）下载安装
官网：https://nodejs.org/en
2）验证Nodejs的环境变量
安装完成后，win+R输入cmd打开命令提示符，输入 node -v，若成功显示版本号，说明安装成功。
3）配置npm的全局安装路径
我的已经配置过了，没有配置的看下面操作即可。搜索框搜索cmd，以管理员的身份打开命令提示符，输入如下命令
npm config set prefix "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js"
我的Nodejs安装路径为：C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js，上面根据自己的替换即可。
可能有的人安装之后忘记了自己的安装路径在哪，这里说一下快速查找安装路径的方法，如下图示。
4）切换npm的淘宝镜像
配置淘宝npm镜像，解决模块安装缓慢或者失败的问题，加速资源下载。
以管理员的身份打开命令提示符，输入如下命令
npm config set registry https://registry.npmmirror.com
2.3 安装Vue-cli（Vue脚手架）
以管理员的身份打开命令提示符，输入如下命令
npm install -g @vue/cli
安装可能需要一些时间，安装好后，输入 vue --version验证，显示版本号即说明安装成功。
3、使用脚手架创建Vue项目
有两种方式创建vue项目，分别是图形化界面和命令行方式创建。这里介绍图形化界面方式创建。
3.2 图形化界面创建
1）在桌面上新建一个文件夹，命名为vue，进入文件夹，在搜索栏上输入cmd敲回车，进入该文件夹的命令提示符。输入 vue ui 调出vue的图形化界面。
2）点击创建 ->在此创建新项目
3）下一步 ->选择手动预设 ->下一步 ->开启Router路由
4）下一步 ->选择vue的版本(2.x) ->创建项目 ->创建项目，不保存预设。
上述设置完成后，就会联网创建项目。可以在命令行中看到进度情况，也可以在图形化界面中查看。
创建完成后，如下
3.2 Vue项目的目录结构
创建完成后，使用 VSCode打开桌面上创建好的vue文件夹。基于Vue脚手架创建出来的工程，有标准的目录结构，如下
3.3 启动Vue项目
有两种方式运行Vue项目，分别是图形化界面和命令行方式。
1）图形化界面方式
注：VSCode侧边栏没有显示NPM脚本的，按ctrl+shift+p，搜索npm，选择资源管理器，点击一下就会出现了，如下。
点击三角形按钮运行
访问http://localhost:8081/，效果如下
2）命令行方式
进入该Vue项目的目录里面，在目录搜索栏上输入cmd敲回车，进入该目录的命令提示符。输入如下命令启动vue
npm run serve
3）Vue项目的热部署功能
将App.vue文件里的 Home改为 Vue Home，直接ctrl+s保存，不重启项目。
再回去看网页，发现发生了变化
4）Vue项目的端口配置
由于我们启动Java项目用到的Tomcat服务器默认占用的端口就是8080端口，所以这里我们配置一下Vue项目的端口。
在 vue.config.js文件内添加如下代码，并ctrl+s保存
devServer: {
port: 7000
}
按ctrl+c终止原服务，再次启动项目
浏览器访问http://localhost:7000/，成功访问。说明端口配置成功！
3.4 Vue项目的开发流程
Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>，<script>，<style> 。
