相信很多同學(xué)都知道 Electron 可以幫助開發(fā)人員使用前端技術(shù)開發(fā)桌面客戶端應(yīng)用，今天介紹的 electron-vue 框架是一套基于 Vue.js 開發(fā) Electron 桌面應(yīng)用的腳手架，該項(xiàng)目的目的，是為了要避免使用 vue 手動(dòng)建立起 electron 應(yīng)用程序。

　　相信很多同學(xué)都知道 Electron 可以幫助開發(fā)人員使用前端技術(shù)開發(fā)桌面客戶端應(yīng)用，今天介紹的 electron-vue 框架是一套基于 Vue.js 開發(fā) Electron 桌面應(yīng)用的腳手架，該項(xiàng)目的目的，是為了要避免使用 vue 手動(dòng)建立起 electron 應(yīng)用程序。

 

概要

該項(xiàng)目的目的，是為了要避免使用 vue 手動(dòng)建立起 electron 應(yīng)用程序。electron-vue 充分利用 vue-cli 作為腳手架工具，加上擁有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

在 這里 查看其文檔。

你會(huì)在本樣板代碼中找到的東西...

• 基本的項(xiàng)目結(jié)構(gòu)與 單一的 package.json 設(shè)置
• 詳細(xì)的 文檔
• 使用 vue-cli 作為項(xiàng)目腳手架
• 立即可用的 Vue 插件 (axios, vue-electron, vue-router, vuex)*
• 預(yù)裝開發(fā)工具 vue-devtools 和 devtron
• 使用 electron-packager 或 electron-builder 輕松打包你的應(yīng)用程序*
• appveyor.yml 與 .travis.yml 配置用于 electron-builder 的自動(dòng)部署*
• 能夠生成用于瀏覽器的網(wǎng)頁輸出
• 便利的 NPM 腳本
• 使用攜帶模塊熱更新 (Hot Module Replacement) 的 webpack 和 vue-loader
• 在工作在 electron 的 main 主進(jìn)程時(shí)重啟進(jìn)程
• 支持使用 vue-loader 的 HTML/CSS/JS 預(yù)處理器
• 默認(rèn)支持 stage-0 的 ES6
• 使用 babili 避免完全反編譯到 ES5
• ESLint (支持 standard 和 airbnb-base)*
• 單元測試 (使用 Karma + Mocha)*
• 端到端測試 (使用 Spectron + Mocha)*

* 在vue-cli腳手架中可定制

起步

該樣板代碼被構(gòu)建為 vue-cli 的一個(gè)模板，并且包含多個(gè)選項(xiàng)，可以自定義你最終的腳手架程序。本項(xiàng)目需要使用 node@^7或更高版本。electron-vue 官方推薦 yarn 作為軟件包管理器，因?yàn)樗梢愿玫靥幚硪蕾囮P(guān)系，并可以使用 yarn clean 幫助減少最后構(gòu)建文件的大小。

# 安裝 vue-cli 和 腳手架樣板代碼
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安裝依賴并運(yùn)行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

你是一個(gè) Windows 用戶？

請務(wù)必查看 Windows 用戶注意事項(xiàng) 來確保你擁有 electron 和其他依賴關(guān)系所需的所有必要構(gòu)建工具。

希望使用 Vue 1？

只需指向 1.0 分支即可。請注意，electron-vue 已經(jīng)正式廢除了 vue@^1 的使用，因此，這些更改也同樣會(huì)反映到項(xiàng)目結(jié)構(gòu)、功能和文檔上 (遺留文檔)。

vue init simulatedgreg/electron-vue#1.0 my-project

下一步

請務(wù)必查看 這個(gè)文檔。在這里，你將找到有關(guān)項(xiàng)目配置、項(xiàng)目結(jié)構(gòu)和構(gòu)建應(yīng)用程序的有用信息。這里還有一個(gè)方便的 常見問題 的部分。

基于 electron-vue 的作品

看看一些基于 electron-vue 建造的了不起的的項(xiàng)目。想要在此列出你自己的項(xiàng)目嗎？請隨時(shí)提交 pull 請求。

• Surfbird: 一個(gè)基于 Electron 和 Vue 的 Twitter 客戶端
• Lulumi-browser: Lulumi-browser 是一個(gè)輕量級的瀏覽器，基于 Vue.js 2 和 Electron
• Space-Snake: 使用 Electron 和 Vue.js 構(gòu)建的桌面游戲。
• Forrest: 一個(gè) npm 腳本的桌面客戶端
• miikun: 一個(gè)簡單的 Markdown 編輯器
• Dakika: 超省時(shí)的應(yīng)用程序，使寫作變得輕而易舉
• Dynamoc: Dynamoc 是一個(gè) dynamodb-local、 dynalite 和 AWS dynamodb 的圖形化界面客戶端
• Dockeron: Dockeron 項(xiàng)目, 基于 Electron + Vue.js 的 Docker 桌面客戶端
• Easysubs: 快速簡單地下載字幕
• Data-curator：分享可用的開放數(shù)據(jù)。

 

原文來自：electron-vue：使用 Vue.js 開發(fā) Electron 桌面應(yīng)用

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計(jì)資源