第四篇：Vue CLI 脚手架搭建框架并运行

前言
在上面几篇文章中主要讲解了springboot项目创建与mybatis的整合，从这边文章开始，就开始做项目实践。

一、前后端分离的核心思想及优势

前后端分离已成为互联网项目开发的业界标准使用方式，在此项目中使用springboot+vue+axios来实现；

许多人都会问什么是前后端分离，那前后端分离又有什么优点呢？
前后端分离的核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后分离的优势有一下几点
1.可以实现真正的前后端解耦，前端服务器使用nginx。
前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。
（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）

2.发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。
页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。
接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。
双方互不干扰，前端与后端是相亲相爱的一家人。

3.在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。
（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）

4.减少后端服务器的并发/负载压力
除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。
且除了第一次页面请求外，浏览器会大量调用本地缓存。

5.即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。

6.也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，
那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）

7.页面显示的东西再多也不怕，因为是异步加载。

8.nginx支持页面热部署，不用重启服务器，前端升级更无缝。

9.增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。

10.提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。

11.在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），
内网使用http，性能和安全都有保障。

12.前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！

二、Node.js及Vue CLI 脚手架的安装

2.1 安装Node.js

附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/

安装 Vue CLI（脚手架）需要使用 npm ，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。

node.js网站非常的友好还给我们提供了翻译功能，点击选择简体中文即可，我们看到在官网上有两个版本，左边是长期支持版本，右边是当前版本，下载哪个都行，不过推荐使用长期支持版本。

点击下载文件格式node-v12.14.0-x64 .msi，双击次文件出现如下弹框，点击运行

在此页面点击next进入下一步