> 基于 vue (基本上是它聽起來的樣子) 來構造 electron 應用程序的樣板代碼。 [](https://semaphoreci.com/simulatedgreg/electron-vue) [](https://github.com/feross/standard) [](http://forthebadge.com) [](http://forthebadge.com) [](http://forthebadge.com) ## 概要 該項目的目的，是為了要避免使用 vue 手動建立起 electron 應用程序。electron-vue 充分利用 `vue-cli` 作為腳手架工具，加上擁有 `vue-loader` 的 `webpack`、`electron-packager` 或是 `electron-builder`，以及一些最常用的插件，如`vue-router`、`vuex` 等等。 #### 在 [這里](getting_started.md) 查看其文檔。 你會在本樣板代碼中找到的東西... * 基本的項目結構與 **單一的** `package.json` 設置 * 詳細的 [文檔](https://simulatedgreg.gitbooks.io/electron-vue/content/) * 使用 [vue-cli](https://github.com/vuejs/vue-cli) 作為項目腳手架 * 立即可用的 Vue 插件 \([axios](https://github.com/mzabriskie/axios), [vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex)\)\* * 預裝開發工具 [vue-devtools](https://github.com/vuejs/vue-devtools) 和 [devtron](https://github.com/electron/devtron) * 使用 [electron-packager](https://github.com/electron-userland/electron-packager) 或 [electron-builder](https://github.com/electron-userland/electron-builder) 輕松打包你的應用程序\* * `appveyor.yml` 與 `.travis.yml` 配置用于 [electron-builder](https://github.com/electron-userland/electron-builder) 的自動部署\* * 能夠生成用于瀏覽器的網頁輸出 * 便利的 [NPM 腳本](/npm_scripts.md) * 使用攜帶模塊熱更新 (Hot Module Replacement) 的 [webpack](https://github.com/webpack/webpack) 和 [vue-loader](https://github.com/vuejs/vue-loader) * 在工作在 electron 的 `main` 主進程時重啟進程 * 支持使用 [vue-loader](https://github.com/vuejs/vue-loader/) 的 HTML/CSS/JS 預處理器 * 默認支持 [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) 的 ES6 * 使用 [`babili`](https://github.com/babel/babili) 避免完全反編譯到 ES5 * ESLint \(支持 [`standard`](https://github.com/feross/standard) 和 [`airbnb-base`](https://github.com/airbnb/javascript)\)\* * 單元測試 \(使用 Karma + Mocha\)\* * 端到端測試 \(使用 Spectron + Mocha\)\* \* 在`vue-cli`腳手架中可定制 ### 起步 該樣板代碼被構建為 [`vue-cli`](https://github.com/vuejs/vue-cli) 的一個模板，并且包含多個選項，可以自定義你最終的腳手架程序。本項目需要使用 `node@^7` 或更高版本。electron-vue 官方推薦 [`yarn`](https://yarnpkg.org) 作為軟件包管理器，因為它可以更好地處理依賴關系，并可以使用 `yarn clean` 幫助減少最后構建文件的大小。 ```bash # 安裝 vue-cli 和 腳手架樣板代碼 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安裝依賴并運行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev ``` ##### 你是一個 Windows 用戶？ 請務必查看 [**Windows 用戶注意事項**](https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users) 來確保你擁有 electron 和其他依賴關系所需的所有必要構建工具。 ##### 希望使用 Vue 1？ 只需指向 `1.0` 分支即可。請注意，electron-vue 已經正式廢除了 `vue@^1` 的使用，因此，這些更改也同樣會反映到項目結構、功能和文檔上 \([**遺留文檔**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs)\)。 ```bash vue init simulatedgreg/electron-vue#1.0 my-project ``` ### 下一步 請務必查看 [這個文檔](https://simulatedgreg.gitbooks.io/electron-vue/content/)。在這里，你將找到有關項目配置、項目結構和構建應用程序的有用信息。這里還有一個方便的 [常見問題](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html) 的部分。 ## 基于 electron-vue 的作品 看看一些基于 electron-vue 建造的了不起的的項目。想要在此列出你自己的項目嗎？請隨時提交 pull 請求。 * [**Surfbird**](https://github.com/surfbirdapp/surfbird): 一個基于 Electron 和 Vue 的 Twitter 客戶端 * [**Lulumi-browser**](https://github.com/qazbnm456/lulumi-browser): Lulumi-browser 是一個輕量級的瀏覽器，基于 Vue.js 2 和 Electron * [**Space-Snake**](https://github.com/ilyagru/Space-Snake): 使用 Electron 和 Vue.js 構建的桌面游戲。 * [**Forrest**](https://github.com/stefanjudis/forrest): 一個 npm 腳本的桌面客戶端 * [**miikun**](https://github.com/hiro0218/miikun): 一個簡單的 Markdown 編輯器 * [**Dakika**](https://github.com/Madawar/Dakika): 超省時的應用程序，使寫作變得輕而易舉 * [**Dynamoc**](https://github.com/ieiayaobb/dynamoc): Dynamoc 是一個 dynamodb-local、 dynalite 和 AWS dynamodb 的圖形化界面客戶端 * [**Dockeron**](https://github.com/dockeron/dockeron): Dockeron 項目, 基于 Electron + Vue.js 的 Docker 桌面客戶端 * [**Easysubs**](https://github.com/matiastucci/easysubs): 快速簡單地下載字幕 * [**Data-curator**](https://github.com/ODIQueensland/data-curator)：分享可用的開放數據。