項目由來
因為想要用GUI，而我又是一個向FontEnd Developer方向發展的小白，自然而然想到了Electron來套殼，讓網頁變成桌面應用，之前只是了解過這個領域，沒真正實踐過，所以這此項目也是對Electron的一個認識和學習吧。
項目的實現是一個WIndows平臺的文件管理器，實現了基本的文件操作功能，新建，刪除，復制，粘貼，剪切，重命名。
項目地址：https://github.com/k-water/electron-filesystem
什么是Electron
Electron 可以讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你可以把它看作是專注于桌面應用而不是 web 服務器的，io.js 的一個變體。
這不意味著 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。
以下資料供參考學習：
Electron(維基百科)
中文文檔
(譯)Electron的本質
入門視頻教程
技術棧
- [x] Vue
- [x] VueRouter
- [x] Vuex
- [x] Vue-Electron
- [x] iView
- [x] Eslint
- [x] Babel
- [x] Webpack
- [x] Less
- [x] Nodejs
項目采用了vue-cli腳手架搭建開發環境，在開始編碼之前，在gayhub上搜了一下，發現有大神寫了一個基于vue和electron的腳手架，看了文檔后，發現正好適合我的需要，瞬間發現了新大陸。
項目名稱：electron-vue
項目地址：https://github.com/SimulatedGREG/electron-vue
項目文檔(英文的)：https://simulatedgreg.gitbooks.io/electron-vue/content/en/
PS：在開始編碼之前要仔細閱讀文檔。
工程目錄
│
├── README.md <= 項目介紹
├── app <= 開發目錄
│ ├── dist <= 編譯打包
│ ├── icons <= 相關圖標
│ ├── src <= 項目源代碼
│ │ ├── main <= electron主進程
│ │ │ ├── application.js
│ │ │ ├── index.dev.js
│ │ │ ├── index.js
│ │ ├── renderer <= electron渲染進程
│ │ │ ├── App.vue <= Vue 根組件
│ │ │ ├── main.js <= Vue 入口
│ │ │ ├── assets <= 靜態資源
│ │ │ ├── common <= 公共配置
│ │ │ ├── config <= 項目配置
│ │ │ ├── extend <= Vue 擴展相關
│ │ │ ├── router <= Vue 路由相關
│ │ │ ├── store <= Vuex
│ │ │ ├── views <= 視圖層
│ ├── index.ejs <= 模板文件
│ ├── package.json <= 相關依賴
├── build <= 打包桌面應用相關
│ ├── Gruntfile.js <= 構建腳本
│ ├── package.json <= 相關依賴
├── tasks <= electron-packeger打包
│ ├── release.js
│ ├── runner.js
├── test <= 測試文件夾
│ ├── e2e
│ ├── unit
│ ├── .eslintrc
├── config.js <= electron打包配置
├── webpack.main.config.js
├── webpack.renderer.config.js
├── package.js
│
│
使用說明
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron app for production
npm run build
# lint all JS/Vue component files in `app/src`
npm run lint
# run webpack in production
npm run pack
效果預覽
