踩坑之旅:springboot+vue+webpack项目实战(一)
2019独角兽企业重金招聘Python工程师标准>>>
网上关于springboot的小项目很多,node.js+vue的项目也很多,但是好像没有两者合一的项目,最近在想实践下将两者合一,写个小项目,本教程使用springboot, vue, webpack开发了一款简单的SPA应用,这里主要记录开发+调试+打包,以备后面自己查阅
我的开发环境如下:
IDE:Intellij IDEA 2017.2.5
JDK:Java 8
Gradle:4.3.1
Node.js:v8.9.0
Vue:2.9.1
1.Node.js安装与配置
- 到官网下载最新的Node.js安装
- 由于Node.js安装后,默认的node_modules和缓存文件是存在C盘的,最好是修改成其它盘。
在其它盘创建Node.js缓存文件夹,如:
F:\Files\_dev\node\global 存放例如用`npm install -g express`命令安装的模块文件 F:\Files\_dev\node\cache 存放下载缓存
找到【nodejs安装目录】/node_modules/npm/npmrc 文件,用txt打开,修改配置:
prefix=F:\Files\_dev\node\npm\global 指定全局安装的node模块的目录 cache=F:\Files\_dev\node\npm\cache 指定缓存目录 registry=https://registry.npm.taobao.org 指定使用国内的淘宝的Node.js镜像
- 为了测试配置是否成功,运行一下命令
npm install -g express
安装一个express试试,Java程序员可能不知道,express是Node.js的后端mvc框架,类似Java中的SpringMVC。如果安装成功,会生成一个F:\Files\_dev\node\global\node_modules目录,express的文件就在该目录下。 或者使用命令行设置:
npm config set prefix "F:\Files\_dev\node\npm\global"npm config set cache "F:\Files\_dev\node\npm\cache"npm config set registry https://registry.npm.taobao.org
在系统变量中,新增变量:
NODE_PATH=F:\Files\_dev\node\npm\global
在系统变量中,Path环境变量添加%NODE_PATH%:
path=%NODE_PATH% // 加入该路径,才能使用后面安装vue-cli后的vue命令
2.vue-cli安装
vue-cli中cli是command line interface的缩写,安装很简单:npm install -g vue-cli
,-g
是全局安装的意思。安装过程可能比较久。安装完可以通过vue -V
查看是否安装成功。如下图:
3.Gradle安装与配置
注意:
在安装Gradle之前要先确认已经安装JDK
1.Gradle官网下载最新的压缩包,解压到任意位置;
2.配置环境变量
新建环境变量名GRADLE_HOME,变量值为Gradle的路径
3.将他添加到PATH变量中: %GRADLE_HOME%\bin
4.测试运行
打开cmd,运行: gradle -v
安装成功.
4.在IDEA搭建项目框架
- 创建整体工程的结构是,先创建一个总工程,叫ziyoo(犬子名字),再创建两个子模块,一个叫server,一个叫web。
- 打开IDEA,File-->New-->Project-->Gradle-->取消勾选Java-->Next。如下图:
- 输入父工程的信息,如下图:
- 设置Gradle相关配置,由于网络特殊原因,最好用本地的Gradle库,配置如下图:
- 设置项目存放路径,如下图:
- ziyoo项目创建出来就除了Gradle的配置文件,其它什么都没有,接下来要创建两个子工程server和web。
创建server子项目,对着ziyoo项目:
右键-->New-->Module-->Gradle-->勾选Java -->Next-->ArtifactId填"server" -->Next-->Finished
创建web子项目,对着ziyoo项目:
右键-->New-->Module-->Gradle-->勾选Javaweb -->Next-->ArtifactId填"web" -->Next-->Finished
将ziyoo总项目的
build.gradle
文件修改成如下配置:group 'com.gongshi' version '1.0'
将ziyoo总项目的
setting.gradle
文件修改成如下配置:rootProject.name = 'ziyoo' include 'server' include 'web'
将
web
子项目的build.gradle
文件修改成如下配置:plugins {id "com.moowork.node" version "1.1.1"id 'java' } //调用npm run build命令的Gradle任务 task npmBuild(type: NpmTask, dependsOn: npmInstall) {group = 'node'args = ['run', 'build'] }//Gradle的java插件的jar任务,依赖npmBuild,即web子模块打jar包前必须运行npm run build jar.dependsOn npmBuild//调用npm run dev task npmDev(type: NpmTask, dependsOn: npmInstall) {group = 'node'args = ['run', 'dev'] }
在上面的代码中,
id "com.moowork.node" version "1.1.1"
一行是加入了一个Gradle插件,叫gradle-node-plugin,该插件可以通过调用Gradle命令来调用node.js的命令或npm的命令。插件自带了一些内容的命令,如:gradle npmInstall
用于运行npm install
命名,另外还有:$ gradle npm_install $ gradle npm_update $ gradle npm_list $ gradle npm_cache_clean ...
将
server
子项目的build.gradle
文件修改成如下配置:plugins {id 'org.springframework.boot' version '1.5.2.RELEASE'id 'java' }jar {baseName = 'server'version = '1.0' }repositories {//使用淘宝的maven镜像maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'} }dependencies {compile project(':web')//server模块依赖web模块compile("org.springframework.boot:spring-boot-starter-web")compile("org.springframework.boot:spring-boot-devtools")testCompile("org.springframework.boot:spring-boot-starter-test") }
在上面的代码中,需要特别注意的是
compile project(':web')
,这个设置能在server打包时把web的资源先打包,并作为依赖,加入到server项目生成的jar包中。
13.在IDEA右侧找到Gradle的栏目,点击Refresh All Gradle Projects, IDEA会按找各个build.gradle文件的配置,下载依赖的jar。
到这里为止,项目的结构搭建好了,下一步是先编写一下SpringBoot的代码,把一个简单Java后台跑起来。
转载于:https://my.oschina.net/weijuer/blog/1570892
踩坑之旅:springboot+vue+webpack项目实战(一)相关推荐
- springboot + vue + elementUI项目实战——简洁清新的员工管理系统(一)
springboot + vue + elementUI + mybatis + redis 清新的员工管理系统 前言 从这期,项目从需求分析开始,一步步实现一个老经典的清新的员工管理系统,适合有 ...
- Java Springboot+vue毕业项目实战-疫情防疫信息管理系统
主要技术实现:文末获取源码联系 Java.springmvc.VUE.node.js.mybatis.mysql.tomcat.jquery.layui.bootstarp.JavaScript.ht ...
- Vue踩坑之旅(一)—— 数组、对象的监听
作为一个接触 vue 才一个多月的小白,马上就接手基于 vue 的大型商城项目,其间真是跌跌撞撞踩了好多坑(o(╥﹏╥)o).在此写下自己的踩坑之旅,希望给跟我一样还在自学 vue 的同学一些帮助,另 ...
- 【踩坑系列】 SpringBoot ,SpringSecurity,activiti 项目无法正常跳转到登录界面
[踩坑系列] SpringBoot ,SpringSecurity,activiti 项目无法正常跳转到登录界面 前言 一直强制跳转到springSecurity 的默认的登录界面,无法正常跳转到自己 ...
- python 同花顺thstrader_Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)...
代码示例支持 平台: Centos 6.3 Python: 2.7.14 1.1 踩坑案例 pid, ppid是大家比较常见的术语, 代表进程号,父进程号. 但pgid是个什么鬼? 了解pgid之前, ...
- Android google翻译踩坑之旅
# Android google翻译踩坑之旅 最近由于工作需求,需要为游戏Android平台接入Google翻译的SDK,由于关于翻译的文章非常少,访问官方文档又需要翻墙,更可气的是找到的博客写了 ...
- SpringBoot + Vue + nginx项目一起部署
SpringBoot + Vue + nginx项目一起部署 SpringBoot + Vue 一起部署到 nginx 1.后端项目部署: (1) Java项目打包上传到 服务器,开启服务 java ...
- vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决 参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
- 微信开发踩坑之旅 之 开发准备及服务器配置
在工作和兴趣的机缘巧合之下,我开始接触微信开发.在这里简单记述自己的微信开发踩坑之旅. 首先,由于本人标准的理工科生,记述的语言有所不足,我尽量说明准确和详细点. 本文记述主线 ·申请公众号 ·公众号 ...
最新文章
- 【Java Web开发指南】Java插入中文到数据库中文变成问号解决
- 通过VMware vsphere搭建集群
- 冤冤相报何时了?奥克斯、格力再互怼,“周一见”
- jquery完善的处理机制
- 机器学习cnn如何改变权值_五个机器学习悖论将改变您对数据的思考方式
- 神策分析 1.13 版本用户分群全新升级,为企业打磨精细化运营基石
- Ubuntu16.04安装百度网盘亲测可用
- SVN工具添加忽略上传文件和取消忽略文件
- Android国家区号 中英文
- 连续型随机变量及概率密度
- Python3语言详解
- Milvus 揭秘| 向量索引算法HNSW和NSG的比较
- 看腻了杨幂,热巴,快来抓取上千张美女图片,古装美女看个够
- 亿图图示使用方法记录
- 开源组态HmiFuncDesigner之如何在ProjectManager新增通讯设备插件
- RK3399学习笔记 1.0.3---python环境 Firefly Core-3399pro-jd4 Win10上RKNN工具安装
- 豆瓣电台WP7客户端 开发记录2
- js怎么实现网站抓取手机号
- 腾讯起点学院:用户增长训练营
- 联发科p60和骁龙710哪个好_骁龙710、麒麟710和联发科P60性能对比测试 哪个好?...
热门文章
- 安卓开发首次创建项目一直转圈_Android视频开发进阶(part3Android的Media API)
- el-table 行背景颜色_用手机拍花卉怎样使背景变黑?
- mysql忘了root密码_mysql忘记root密码怎么办
- k歌的录音伴奏合成技术如何实现_2019年中国在线K歌行业市场现状,在线K歌用户女性占比较高...
- java jconsole_java中jconsole命令的学习
- ikvm java转换成dll_利用IKVM.NET将Java jar包转换成可供C#调用的dll文件
- easyexcel注解样式无效_【Java神器】用@ResponseExcel注解将Java List直接转换为Excel文件。不好意思,今晚又可以早点下班了!...
- sqlserver安装目录_Jira试用报告(安装及数据迁移篇)
- java freememory 单位_Runtime类中的freeMemory,totalMemory,maxMemory区别
- java 保存inputstream_java如何将一个InputStream写入文件啊?