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项目实战（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。