你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
标签：一个执着的职场程序员！
前后端分离已经成为互联网项目开发的主流使用方式。
通过 nginx + Tomcat 的方式,中间加一个 nodejs有效的进行解耦，并且前后端分离会为以后的大型分布式架构，弹性计算架构，微服务架构，多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等）打下坚实的基础。
这个步骤也是一种进化之路。
我的开源项目 一点知识学院 技术是spring boot +easyui ，但是不是前后端分离的，ui界面还是有点旧了，有些朋友说是否可以更换一套ui，还有朋友在学习的时候说能不能做成前后端分离。
这个当然会满足支持我的朋友，为了能更好的做好前后端分离，我也做了很多准备，从项目的需求，到原型图，再到选择框架技术，最终决定从现在搞起前后端分离的技术，并且不定时的更新有关的技能，最后会开源一个项目，和一点知识学院一样 会是一个完整的项目，拿来即用的那种，希望对大家有帮助，也多谢大家的支持。
说到前后端分类，我们需要了解它的有点，就是我们为什么使用前后端分离？
有一下几点，可能会更多，但是目前我看到的几点如下：
可以实现真正的前后端解耦，前端服务器使用 nginx。
发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。
在大并发情况下，可以同时水平扩展前后端服务器
减少后端服务器的并发/负载压力。
即使后端服务器暂时超时或者宕机了，前端页面也会正常访问，只不过数据显示不出来而已。
接口可以公用
页面显示的东西再多也不怕，因为是异步加载。
nginx 支持热部署，不用重启服务器，前端无缝升级。
增加代码的维护性&易读性（前后端耦合在一起的代码读起来相当费劲）
提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖
在nginx 中部署证书，外网使用http访问，并且只开发443和80端口，其他端口一律关闭（防止黑客户端口扫描），内网使用http，性能和安全都有保障
前端大量的组件代码得以复用！
目录：
1，安装node.js
2，安装cnpm
3，cnpm安装脚手架vue-cli
4，构建项目
5，安装项目依赖
6，运行项目
下面我们开启我们的vue学习之旅吧！！！
1，安装node.js
首先 进入Node.js官网：https://nodejs.org/en/，选择需要的版本下载并安装Node.js。
下载后文件格式如下：
#安装Node
#验证Node.js是否安装好
打开cmd命令行窗口。输入node -v即可得到对应的Node.js版本。
npm包管理器是集成在Node.js中的，所以在安装Node.js的时候就已经自带了npm，输入npm -v可得到npm的版本。
如果需要将 npm版本更新到最新版本，可以输入以下命令npm -g install npm，更新npm至最新版本。
2，安装cnpm
安装 cnpm 执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org , 国内镜像（npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的npm命令，赖包加载速度快并且没有任何限制。
3，cnpm安装脚手架vue-cli
为什么使用脚手架？
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。
4，构建项目
好了，上面的几个需要的工具和环境已经配置好了，下一步我们需要构建项目了。
构建项目分如下几步：
1，进入项目需要存储的路径目录下，
2，输入新建项目命令 vue init webpack test-vue，执行后会自动生成vue项目。
效果如下：
进入项目目录。
创建项目
5，安装项目依赖
安装项目依赖用以项目的开发，很简单一样命令搞定。
首先进入到项目目录下 ，然后输入命令 cnpm install 安装项目所需的依赖包资源。
6，运行项目
项目准备完毕后，输入命令npm run dev 来运行项目
项目运行成功后浏览器访问地址 http://localhost:8080 就可以啦。
好的，vue的环境搭建到这里就ok了，后面就可以和springboot后端框架做前后端分离了，期待下篇。。。
作者：小小蒲公英