在之前的兩篇文章中瞭解了Electron的基本概念,但是沒有說到具體怎麼去寫一個 Electron頁面,這次記錄下The fist electron page 的誕生.
Part 1
ELectron中的每個頁面都在自己的的程式中執行,這個程式就是渲染程式.而 ELectron 中的每個網頁就是普通前端頁面,所以技術上有很多可選項,而我選擇的Vue.
Vue 對大部分移動端開發來說可能是僅僅聽過,我這個FE菜鳥也沒法說出它的優缺點,僅僅是看過 demo 之後愛上了它的寫法,而且我司神庫 element 也是選vue 的一個小理由.
那, Electron 跟 Vue 怎麼一起使用呢?
electron-vue
vue-cli, webpack, vue-router等等.
再提一下,electron-vue的文件非常友好simulatedgreg.gitbooks.io/electron-vu…,對新手入門真是非常有用.
Part 2
electron-vue 的工程目錄:
│
├── 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
│
複製程式碼在開發中,如何使用vue 來構造一個頁面並不在入門範圍內,這個屬於前端基礎範圍.
Part 3
// To do: 專案打包...