沒想到Spring Boot + Vue 竟如此強大

npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org

vue -V

npm install @vue/cli -g

npm install -g electron
或者
cnpm install -g electron

electron --version

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start
npm install
npm start

vue init simulatedgreg/electron-vue

Electron
├──atom - Electron 的源代碼
|  ├── app - 系統(tǒng)入口代碼
|  ├── browser - 包含了主窗口、UI 和其他所有與主進程有關的東西，它會告訴渲染進程如何管理頁面
|  |   ├── lib - 主進程初始化代碼中 JavaScript 部分的代碼
|  |   ├── ui - 不同平臺上 UI 部分的實現(xiàn)
|  |   |   ├── cocoa - Cocoa 部分的源代碼
|  |   |   ├── gtk - GTK+ 部分的源代碼
|  |   |   └── win - Windows GUI 部分的源代碼
|  |   ├── default_app - 在沒有指定 app 的情況下 Electron 啟動時默認顯示的頁面
|  |   ├── api - 主進程 API 的實現(xiàn)
|  |   |   └── lib - API 實現(xiàn)中 Javascript 部分的代碼
|  |   ├── net - 網(wǎng)絡相關的代碼
|  |   ├── mac - 與 Mac 有關的 Objective-C 代碼
|  |   └── resources - 圖標，平臺相關的文件等
|  ├── renderer - 運行在渲染進程中的代碼
|  |   ├── lib - 渲染進程初始化代碼中 JavaScript 部分的代碼
|  |   └── api - 渲染進程 API 的實現(xiàn)
|  |       └── lib - API 實現(xiàn)中 Javascript 部分的代碼
|  └── common - 同時被主進程和渲染進程用到的代碼，包括了一些用來將 node 的事件循環(huán)
|      |        整合到 Chromium 的事件循環(huán)中時用到的工具函數(shù)和代碼
|      ├── lib - 同時被主進程和渲染進程使用到的 Javascript 初始化代碼
|      └── api - 同時被主進程和渲染進程使用到的 API 的實現(xiàn)以及 Electron 內置模塊的基礎設施
|          └── lib - API 實現(xiàn)中 Javascript 部分的代碼
├── chromium_src - 從 Chromium 項目中拷貝來的代碼
├── docs - 英語版本的文檔
├── docs-translations - 各種語言版本的文檔翻譯
├── spec - 自動化測試
├── atom.gyp - Electron 的構建規(guī)則
└── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準備的編譯設置和構建規(guī)則

• script - 用于諸如構建、打包、測試等開發(fā)用途的腳本
• tools - 在 gyp 文件中用到的工具腳本，但與 script 目錄不同， 該目錄中的腳本不應該被用戶直接調用
• vendor - 第三方依賴項的源代碼，為了防止人們將它與 Chromium 源碼中的同名目錄相混淆， 在這里我們不使用 third_party 作為目錄名
• node_modules - 在構建中用到的第三方 node 模塊
• out - ninja 的臨時輸出目錄
• dist - 由腳本 script/create-dist.py 創(chuàng)建的臨時發(fā)布目錄
• external_binaries - 下載的不支持通過 gyp 構建的預編譯第三方框架

• electron-vue：Electron模版配置。
• build：文件夾，用來存放項目構建腳本。
• config：中存放項目的一些基本配置信息，最常用的就是端口轉發(fā)。
• node_modules：這個目錄存放的是項目的所有依賴，即 npm install 命令下載下來的文件。
• src：這個目錄下存放項目的源碼，即開發(fā)者寫的代碼放在這里。
• static：用來存放靜態(tài)資源。
• index.html：則是項目的首頁、入口頁，也是整個項目唯一的HTML頁面。
• package.json：中定義了項目的所有依賴，包括開發(fā)時依賴和發(fā)布時依賴。

• index.js：應用程序的主文件，electron 也從這里啟動的，它也被用作 webpack 產(chǎn)品構建的入口文件，所有的 main 進程工作都應該從這里開始。
• index.dev.js：此文件專門用于開發(fā)階段，因為它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以擴展開發(fā)的需求。

• https://github.com/xiaozhu188/electron-vue-cloud-music

• https://github.com/SmallRuralDog/electron-vue-music

文章來源：https://segmentfault.com/a/1190000021376934

到此文章就結束了。如果今天的文章對你在進階架構師的路上有新的啟發(fā)和進步，歡迎轉發(fā)給更多人。歡迎加入架構師社區(qū)技術交流群，眾多大咖帶你進階架構師，在后臺回復“加群”即可入群。

這些年小編給你分享過的干貨

1.SpringBoot物流管理項目，拿去學習吧（附源碼）

2.ERP系統(tǒng)，自帶進銷存+財務+生產(chǎn)功能，拿來即用（附源碼）

3.帶工作流的SpringBoot后臺管理項目快速開發(fā)（附源碼）
4.最好的OA系統(tǒng)，拿來即用，非常方便（附源碼）

5.SpringBoot+Vue完整的外賣系統(tǒng)，手機端和后臺管理，附源碼！

6.SpringBoot+Vue 可視化拖拽編輯的大屏項目（附源碼）

轉發(fā)在看就是最大的支持??