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

你好，【程序职场】专注于：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后端框架做前后端分离了，期待下篇。。。

作者：小小蒲公英

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

spring boot+iview 前后端分离架构之文件上传的实现（三十一）
spring boot 与 iview 前后端分离架构之文件上传的实现(三十一) 公众号文件上传前端改造 main.js引入配置的全局变量编写baseImgUpload图片上传组件 baseIm ...
spring boot+iview 前后端分离架构之用户管理的实现（三十）
spring boot 与 iview 前后端分离架构之用户管理的实现(三十) 公众号用户管理相关工具类的实现 User实体改造 UserOrg实体改造 UserRole实体改造 UserRole ...
spring boot+iview 前后端分离架构之前后端交互的实现（六）
spring boot 与 iview 前后端分离架构之前后端交互的实现(六) axios的跨域访问工具的封装实现实现前后端交互-后端的实现实现前后端交互-前端的实现 bug修复 mysql的ma ...
分享两款智慧物业系统源码，前后端分离，前端VUE，Uni-app框架
分享两款智慧物业管理系统源码,源码免费分享,需要源码学习参考的小伙伴可以私信我. ▶▶▶1:Java智慧物业管理系统源码(App+业主端微信小程序+物业端H5) 智慧物业介绍: 一.技术架构基于Sp ...
spring boot 与 iview 前后端分离架构之开发环境基于docker的部署的实现（三十六）
spring boot 与 iview 前后端分离架构之开发环境基于docker的后端的部署的实现(三十六) 公众号基于docker的后端的部署安装mysql数据库创建数据库安装redis 安 ...
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
本文目录前言做项目的三大好处强强联手(天狗组合) 专栏作者简介专栏的优势后端规划 1. SpringBoot 和 SpringCloud 的选择 2. Mybatis 和 MybatisPl ...
laravel + Vue 前后端分离之项目配置- 生产环境部署
几日之后,开始部署生产环境, 有兴趣的同学可以先看一下laravel + Vue 前后端分离项目配置开发环境,好了,废话少说,开始总结部署过程中的问题:https://blog.csdn.ne ...
phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...

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

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

最新文章

热门文章