Spring Boot + Vue前后端分离（一）前端Vue环境搭建

你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
 
标签：一个执着的职场程序员！

前后端分离已经成为互联网项目开发的主流使用方式。

通过 nginx + Tomcat 的方式,中间加一个 nodejs有效的进行解耦，并且前后端分离会为以后的大型分布式架构，弹性计算架构，微服务架构，多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等）打下坚实的基础。

这个步骤也是一种进化之路。

我的开源项目  一点知识学院  技术是spring boot +easyui ，但是不是前后端分离的，ui界面还是有点旧了，有些朋友说是否可以更换一套ui，还有朋友在学习的时候说能不能做成前后端分离。

这个当然会满足支持我的朋友，为了能更好的做好前后端分离，我也做了很多准备，从项目的需求，到原型图，再到选择框架技术，最终决定从现在搞起前后端分离的技术，并且不定时的更新有关的技能，最后会开源一个项目，和一点知识学院一样 会是一个完整的项目，拿来即用的那种，希望对大家有帮助，也多谢大家的支持。

说到前后端分类，我们需要了解它的有点，就是我们为什么使用前后端分离？

有一下几点，可能会更多，但是目前我看到的几点如下：

1. 可以实现真正的前后端解耦，前端服务器使用 nginx。

2. 发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。

3. 在大并发情况下，可以同时水平扩展前后端服务器

4. 减少后端服务器的并发/负载压力。

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

6. 接口可以公用

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

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

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

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

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

12. 前端大量的组件代码得以复用！

目录：
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后端框架做前后端分离了，期待下篇。。。

 

作者：小小蒲公英