分享&成長
vboot是一個 Vue 和 SpringBoot2.0的組合基礎工程。如果你喜歡使用這兩個框架做前後臺開發，而又不知道如何讓它們很好的組合，那麼這個項目可能會是你入手學習的一個很好選擇。
VBoot主要依賴四大框架.
Vue 2.x
SpringBoot 2.x
AdminLTE 2.x
vx-easyui
前端插件的使用
vue-select
bootstrapvalidator
Qs
vue-snotify
axios
font-awesome
lodash
pretty-checkbox-vue
vue-cropper
項目結構說明
項目後臺構建使用gradle，前端構建使用webpack。項目目錄結構是這兩者的綜合體，config、static和 wbuild 是 webpack 構建的配置。前後臺代碼都在 src 目錄下，front目錄表示所有的前端代碼，main 保留了原始的標準 java 項目結構。
前端依賴配置為package.json 後臺依賴配置為build.gradle
初始化項目前端依賴
npm install
or
yarn install
導入開發工具，建議使用idea
一般 idea 導入 gradle 項目都會進行自動構建和下載依賴，如果沒有，在 idea 的右邊欄有 gradle 的工具類，點擊刷新按鈕即可。首次初始化，可能會需要比較長時間的下載，需要耐心等待。
數據庫和數據源配置
基礎數據在 vboot.sql中，自行創建好數據庫導入數據即可。
數據源的修改則在application.yml中對應配置即可，對於熟悉springboot的你，這都不是問題。
運行項目
後臺啟動項配置：
前臺啟動項配置：
前端編譯：
啟動說明：
後臺服務端口配置在application.yml的server.port默認配置8088，如果是開發模式下，只需啟動服務即可，不需要使用瀏覽器訪問。如果是準備發佈，則需先執行如上配置的 front-build，再啟動項目訪問即可。
開發模式需要同時啟動 front 服務和 boot 項目。 front 前端端口為8081。啟動 front 服務後，訪問 http://localhost:8081/,開發時所有的數據請求都會被代理到後臺 boot 端進行處理。build 發佈後自動能夠無縫切換環境。
front 目錄結構說明
如果你熟悉 vue 開發，那麼這個結構你應該不會太陌生。
api 數據接口的配置和接口訪問規則定義
assets 不需要經常改變的靜態資源
components 自定義的全局組件
directive 自定義指令，注意是定義了權限控制指令
filters 全局的過濾器，這個暫時沒用到，功能少，預留的標準結構。
router 前端的路由配置
store 全局數據狀態管理
styles 樣式，app.scss 為全局樣式
utils 工具包
views 所有的頁面都在此處了
App.vue vue 程序的主界面
bootstrap.js 一些全局的加載項和配置項
main.js 前端入口 js
mixins.js vue組件的全局配置。
閱讀更多 程序猿的內心獨白 的文章
