1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        Spring Boot + Vue = 王炸!

        共 4795字,需瀏覽 10分鐘

         ·

        2021-11-15 09:15

        者 |?xiangzhihong
        segmentfault.com/a/1190000021376934

        雖然 B/S 是目前開發(fā)的主流,但是 C/S 仍然有很大的市場需求。受限于瀏覽器的沙盒限制,網(wǎng)頁應(yīng)用無法滿足某些場景下的使用需求,而桌面應(yīng)用可以讀寫本地文件、調(diào)用更多系統(tǒng)資源,再加上 Web 開發(fā)的低成本、高效率的優(yōu)勢,這種跨平臺方式越來越受到開發(fā)者的喜愛。
        Electron 是一個基于 Chromium 和 Node.js,使用 HTML、CSS 和 JavaScript 來構(gòu)建跨平臺應(yīng)用的跨平臺開發(fā)框架,兼容 Mac、Windows 和 Linux。目前,Electron 已經(jīng)創(chuàng)建了包括 VScode 和 Atom 在內(nèi)的大量應(yīng)用。
        環(huán)境搭建
        創(chuàng)建 Electron 跨平臺應(yīng)用之前,需要先安裝一些常用的工具,如 Node、vue 和 Electron 等。
        安裝 Node
        進入 Node 官網(wǎng)下載頁 http://nodejs.cn/download/,然后下載對應(yīng)的版本即可,下載時建議下載穩(wěn)定版本。如果安裝 Node 使用 Homebrew 方式,建議安裝時將 npm 倉庫鏡像改為淘寶鏡像,如下所示。
        npm config set registry http://registry.npm.taobao.org/
        或者
        npm install -g cnpm --registry=https://registry.npm.taobao.org
        安裝/升級 vue-cli
        先執(zhí)行以下命令,確認下本地安裝的 vue-cli 版本。
        vue -V
        如果沒有安裝或者不是最新版,可以執(zhí)行以下命令安裝/升級。
        npm install @vue/cli -g
        安裝 Electron
        使用如下命令安裝 Electron 插件。
        npm install -g electron
        或者
        cnpm install -g electron
        為了驗證是否安裝成功,可以使用如下的命令。
        electron --version
        創(chuàng)建運行項目
        Electron 官方提供了一個簡單的項目,可以執(zhí)行以下命令將項目克隆到本地。
        git clone https://github.com/electron/electron-quick-start
        然后在項目中執(zhí)行如下命令即可啟動項目。
        cd electron-quick-start
        npm install
        npm start
        啟動后項目的效果如下圖。
        除此之外,我們可以使用 vue-cli 腳手架工具來創(chuàng)建項目。
        vue init simulatedgreg/electron-vue
        然后根據(jù)下面的提示一步步選中選項即可創(chuàng)建項目,如下所示。
        然后,使用 npm install 命令安裝項目所需要的依賴包,安裝完成之后,可以使用 npm run dev 或 npm run build 命令運行 electron-vue 模版應(yīng)用程序,運行效果如下圖所示。
        Electron 源碼目錄
        Electron 的源代碼主要依據(jù) Chromium 的拆分約定被拆成了許多部分。為了更好地理解源代碼,您可能需要了解一下 Chromium 的多進程架構(gòu)。
        Electron 源碼目錄結(jié)構(gòu)和含義具體如下:
        Electron
        ├──atom - Electron 的源代碼
        | ├── app - 系統(tǒng)入口代碼
        | ├── browser - 包含了主窗口、UI 和其他所有與主進程有關(guān)的東西,它會告訴渲染進程如何管理頁面
        | | ├── 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)絡(luò)相關(guān)的代碼
        | | ├── mac - 與 Mac 有關(guān)的 Objective-C 代碼
        | | └── resources - 圖標(biāo),平臺相關(guān)的文件等
        | ├── 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 內(nèi)置模塊的基礎(chǔ)設(shè)施
        | └── lib - API 實現(xiàn)中 Javascript 部分的代碼
        ├── chromium_src - 從 Chromium 項目中拷貝來的代碼
        ├── docs - 英語版本的文檔
        ├── docs-translations - 各種語言版本的文檔翻譯
        ├── spec - 自動化測試
        ├── atom.gyp - Electron 的構(gòu)建規(guī)則
        └── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準備的編譯設(shè)置和構(gòu)建規(guī)則
        平時開發(fā)時,需要重點關(guān)注的就是 src、package.json 和 appveyor.yml 目錄。除此之外,其他需要注意的目錄如下:
        • script - 用于諸如構(gòu)建、打包、測試等開發(fā)用途的腳本
        • tools - 在 gyp 文件中用到的工具腳本,但與 script 目錄不同, 該目錄中的腳本不應(yīng)該被用戶直接調(diào)用
        • vendor - 第三方依賴項的源代碼,為了防止人們將它與 Chromium 源碼中的同名目錄相混淆, 在這里我們不使用 third_party 作為目錄名
        • node_modules - 在構(gòu)建中用到的第三方 node 模塊
        • out - ninja 的臨時輸出目錄
        • dist - 由腳本 script/create-dist.py 創(chuàng)建的臨時發(fā)布目錄
        • external_binaries - 下載的不支持通過 gyp 構(gòu)建的預(yù)編譯第三方框架
        應(yīng)用工程目錄
        使用 electron-vue 模版創(chuàng)建的 Electron 工程結(jié)構(gòu)如下圖。
        和前端工程的項目結(jié)構(gòu)類似,Electron 項目的目錄結(jié)構(gòu)如下所示:
        • electron-vue:Electron模版配置。
        • build:文件夾,用來存放項目構(gòu)建腳本。
        • config:中存放項目的一些基本配置信息,最常用的就是端口轉(zhuǎn)發(fā)。
        • node_modules:這個目錄存放的是項目的所有依賴,即 npm install 命令下載下來的文件。
        • src:這個目錄下存放項目的源碼,即開發(fā)者寫的代碼放在這里。
        • static:用來存放靜態(tài)資源。
        • index.html:則是項目的首頁、入口頁,也是整個項目唯一的HTML頁面。
        • package.json:中定義了項目的所有依賴,包括開發(fā)時依賴和發(fā)布時依賴。
        對于開發(fā)者來說, 90% 的工作都是在 src 中完成,src 中的文件目錄如下。
        Electron 應(yīng)用程序分成三個基礎(chǔ)模塊:主進程、進程間通信和渲染進程。
        1、主進程
        Electron 運行 package.json 的 main 腳本(background.js)的進程被稱為主進程。在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面。一個 Electron 應(yīng)用總是有且只有一個主進程。
        2、渲染進程
        由于 Electron 使用了 Chromium 來展示 Web 頁面,所以 Chromium 的多進程架構(gòu)也被使用到。每個 Electron 中的 Web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中,Web 頁面通常在一個沙盒環(huán)境中運行,不被允許去接觸原生的資源。然而 Electron 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統(tǒng)進行一些底層交互。
        3、主進程與渲染進程通信
        主進程使用 BrowserWindow 實例創(chuàng)建頁面。每個 BrowserWindow 實例都在自己的渲染進程里運行頁面。當(dāng)一個 BrowserWindow 實例被銷毀后,相應(yīng)的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應(yīng)的渲染進程。每個渲染進程都是獨立的,它只關(guān)心它所運行的 Web 頁面。
        src 目錄結(jié)構(gòu)
        在 Electron 目錄中,src 會包包含 main 和 renderer 兩個目錄。
        main 目錄
        main 目錄會包含 index.js 和 index.dev.js 兩個文件。
        • index.js:應(yīng)用程序的主文件,electron 也從這里啟動的,它也被用作 webpack 產(chǎn)品構(gòu)建的入口文件,所有的 main 進程工作都應(yīng)該從這里開始。
        • index.dev.js:此文件專門用于開發(fā)階段,因為它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以擴展開發(fā)的需求。
        渲染進程
        renderer 是渲染進程目錄,平時項目開發(fā)源碼的存放目錄,包含 assets、components、router、store、App.vue 和 main.js。
        assets:assets 下的文件如(js、css)都會在 dist 文件夾下面的項目目錄分別合并到一個文件里面去。components:此文件用于存放應(yīng)用開發(fā)的組件,可以是自定義的組件。router:如果你了解 vue-router,那么 Electron 項目的路由的使用方式和 vue-router 的使用方式類似。modules:electron-vue 利用 vuex 的模塊結(jié)構(gòu)創(chuàng)建多個數(shù)據(jù)存儲,并保存在 src/renderer/store/modules 中。
        相關(guān)案例
        • https://github.com/xiaozhu188/electron-vue-cloud-music
        • https://github.com/SmallRuralDog/electron-vue-music


        END


        推薦閱讀

        一鍵生成Springboot & Vue項目!【畢設(shè)神器】

        Java可視化編程工具系列(一)

        Java可視化編程工具系列(二)


        順便給大家推薦一個GitHub項目,這個 GitHub 整理了上千本常用技術(shù)PDF,絕大部分核心的技術(shù)書籍都可以在這里找到,

        GitHub地址:https://github.com/javadevbooks/books

        Gitee地址:https://gitee.com/javadevbooks/books

        電子書已經(jīng)更新好了,你們需要的可以自行下載了,記得點一個star,持續(xù)更新中..



        瀏覽 55
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            亚洲性爱小说网 | 啊灬啊灬啊灬快灬高潮女女同文 | 国产三级农村妇女 | 黄色一级操逼电影 | 美女尻屄| 美女又爽又黄网站视频 | 免费黄色片视频 | 久久网成人片一区二区香港A片 | 苍井空av作品 | 中文字幕日韩av 男人操女人视频在线观看 淫荡网站 |