基於vue-electron的小項目

項目由來

由於想要用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

---

效果預覽