Vue 全家桶 + Electron 開發的一個跨三端的應用

代碼地址如下：
http://www.demodashi.com/demo/11738.html

GitHub Repo：vue-objccn

Follow: halfrost · GitHub

利用 Vue.js 實現 objc中國 的跨平台全棧應用

• ✅ 桌面應用，支持 Mac、Linux、Windows 三個平台
• ✅ Web 應用，支持 桌面瀏覽器 和 手機瀏覽器
• ✅ 手機 App，目前只支持了 Cordova 框架，支持 iOS、Android、Windows Phone、BlackBerry 四個平台
• ❌ 手機原生 App，打算用 Weex 框架，同樣一起支持 iOS 和 Android 兩個平台

注：此項目純屬個人瞎搞，請大家支持 喵神(@onevcat)，支持 Objc中國。

前言

一.關於我

我是一名全職的 iOS 開發者，非前端開發者。由於接觸了 Weex 開發，從而接觸到了 Vue.js。

二.為什么會寫這個項目？

1. 最開始有這個想法的時候是來自一個網友，他在我的博客上問我，網上有沒有寫的比較好的 Weex demo ？我說尤大寫的那個 Hacker News 是最好的。后來網友就說，樓主能寫一個么？我當時回答暫時不行。其實這事我一直記在心里。

2. 今年5月19號，GitHub 使用 Electron 重寫了 macOS 和 Windows 的客戶端，加上近些年跨端開發越來越火，對於一些公司來說，Web 和 app 應該都是需要的，app 還需要 iOS 和 Android 兩個平台，再有甚者還要開發小程序，桌面級的應用雖然少，但是用 Electron 一樣可以一起開發了。自己也萌生了想要躍躍欲試的念頭。

3. 由於接觸到了 Vue.js，當然不想停留在初級，想進階，尤大給出了建議，就是多實踐，多練。為了加快進階的步伐，自己私下就找項目練。

4. 至於為何選擇 Objc 中國，理由其實很簡單，因為我是 iOS 開發者。在 iOS 開發者中，Objc 基本上人盡皆知（有不知道的？），喵神也基本上人盡皆知，我個人很崇拜喵神，所以就選了 Objc 中國來寫。

5. 因為愛 ... ...

三.這次為何跨端開發沒有weex？

這次在我寫完項目以后，發現 Vue 的代碼直接轉換成 Weex 的項目，是無法實現的，好多報錯。而且不是一下子能都修復好。我相信是我使用姿勢的問題，不是 Weex 的問題。對了，Weex 又發布新版本了，接下來有時間的話就把 Weex 版的也做一遍開源。

好了，進入正題，說項目：

---

技術棧和主要框架

Vue 全家桶：vue2 + vuex + vue-router + webpack
ES6
網絡請求：axios
頁面相應式框架：bootstrap，element-ui
后台：express
代碼高亮：highlight.js
數據庫：lowdb
markdown解析器：vue-markdown
表單驗證：vee-validate
跨平台框架：Electron

項目構建

由於喵神的 Objc 網站是直接返回 html，所以想進行模擬網絡請求返回數據，就只能自己搭建一個后台，寫 api 返回數據了。

我利用 Express 把后台搭建在 8081端口上，並寫好路由，請求會轉到8080，開啟服務器的時候也會自動開啟后台。

# install dependencies 安裝依賴
npm install

# serve with hot reload at localhost:8080
npm run dev

# serve with hot reload at localhost:8080
npm run start

# build for production with minification 打包
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

# 打包 Mac 應用
npm run build:mac

# 打包 Linux 應用
npm run build:linux

# 打包 Win 應用
npm run build:win

# 打包 Cordova 應用
npm run build:app

這里要單獨說一下 Cordova 的打包方式，它比桌面端的稍微特殊一點。

首先把 src/main.js 文件中關於 Coredova 的三行注釋打開，Coredova 庫的初始化需要包在生成 Vue 實例 的外面。打開注釋以后，再執行接下來的步驟。

我在項目中放了一個 Makefile，可以根據這個來做。

1. 首先全局安裝 cordova 命令

npm install -g cordova

2. 再輸入下面的命令，生成 app 項目目錄

cordova create app com.vueobjccn vueobjccn

3. 進入到 app 文件夾中

cd app

4. 添加對應的平台

cordova platform add ios
cordova platform add android

5. 運行項目

cordova run ios
cordova run android

Cordova 只生成了一個殼的 app，里面具體的內容還是讀取的網頁，在生成的對應的應用里面有一個 www 的文件夾，這個文件夾里面就是要加載頁面。JavaScript 打包之后是會生成 www 的文件夾，只要去替換 Cordova 對應平台里面的 www 文件夾里面的內容即可。

額外說幾句，在 app 發展到現在這么成熟的時代，如果構建一個大的 app，用 Cordova 框架去做，不用原生，不做任何優化，用戶體驗確實不如原生的快。我這次就專門打包體驗了 Cordova app，沒有做任何優化，打包出來就用，如果是挑剔的用戶，放在當今各大 app 接近完美的體驗度相比來說，確實會感到滿足感略低。如果真的要前端開發 app ，給2個建議，如果是用 Cordova 框架，一定要盡量優化優化，不然性能不如原生。如果想有接近原生的體驗，那么可以考慮用 React Native 或者 Weex。

跨平台開發

JavaScript 跨平台開發打包成桌面級應用，主要用 Electron 框架。這里需要在 devDependencies 里面安裝好 "electron"、"electron-builder"、"electron-packager" 這三個。其他的路徑配置在 webpack 里面配置好即可。

關於 Cordova 的安裝，確實可以吐槽一點網絡的問題。如果你在一個翻牆環境很差的地方，真的很痛苦。比如之前在一個翻牆環境很差的情況下全局安裝 Cordova ，各種報錯，就算是換了 cnpm 完全安裝了以后，添加 iOS 平台以后以后會報一個 co 文件找不到的問題，感覺是 cnpm 沒有把命令安裝完整。后來我回到家里，翻牆網絡很好，npm install 一下子就安裝好了。不過有個小插曲：Cordova iOS 4.4.0 template 如果報錯，就多安裝幾次，原因還是翻牆的原因，沒有 catch 到。

還有可能會遇到下面這個錯誤：

"Error: Cannot find module 'config-chain'" when running 'ionic start'

這個錯誤就用 sudo 命令重新嘗試一遍原命令就好了。

最終打包完成會在 dist 的文件夾中。

接下來展示一下這個跨三端的應用在各個平台下的表現：

先展示一下 Web 端

再展示一下在手機瀏覽器上的效果：

Android平台

Nexus 5x 的 Web

Nexus 6P 的 Web

iOS 平台

iPhone 5 的 Web

iPhone 7 的 Web

iPhone 7 Plus 的 Web

iPad 的 Web

接着再看看 Mac 端上的表現：

最后看看 Cordova 的效果：

功能展示

用 Vue.js 搭建一個 Web 頁面很快。

看看 Vuex 管理狀態的方便。登錄狀態保存在 state 里面，全局都會獲取到。

一旦用戶沒有登錄，點擊購買電子書的時候，判斷沒有用戶登錄都會跳轉到登錄頁面。

還有一點值得說的是，由於這是一個 SPA ，所以里面的路由都用 Router-link 實現的，而沒有選用 a 標簽的跳轉，效果就是跳轉並不用去請求數據，秒跳。這個用戶體驗真的很爽。

比起寫死的 會好一些，理由如下：

無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

在 HTML5 history 模式下，router-link 會攔截點擊事件，讓瀏覽器不再重新加載頁面。

當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。

登出頁面同理，一旦用戶登出，所有顯示用戶名的地方都會變成登錄，navigationBar 上的購物車也一並消失。用 Vuex 管理狀態，挺好的。

這就是 email 的表單驗證了，沒有太多的技術含量。

這里是購物車頁面，這里用到了 MVVM 頁面的綁定的思想，頁面上4個按鈕，點任意一個按鈕都會立即改變下面的總價。關於 Vue.js 的 MVVM 實現思想值得 iOSer 們學習。

接下來這個是 iPhone 的 Safari 上的表現，速度還可以。

在跨平台的這幾個應用中，體驗最好的，我覺得還是 Mac 的應用。使用起來滿意度非常高。

最后就是 Cordova 框架搭建的 手機 app，體驗度不高，具體如何，看圖吧，總之不優化的 Cordova ，對於挑剔的我來說，我是不滿意的。

iPhone 上的應用

iPad 上的應用

補充代碼截圖

其中src目錄如下：

項目完成之后的感想

先安利一下 element-ui 這個項目，用它來搭建項目，真的很快，頁面很快就可以搭建完成，開發 Vue.js 的同學一定有聽過這個庫。節約出來的大把時間可以把更多的精力放在業務開發上面。

大家都在說現在是大前端時代，移動開發和前端融合是必然。但是兩個平台的開發其實還是有很多的不同，我在經歷過前端的開發和 iOS 開發以后，感想還是很多的，前端和 iOS 是有很多可以相互學習的地方，兩者也各有優缺點。接下來我打算寫寫這些方面的系列文章。前端的工程化，組件化，路由，MVVM，分別和 iOS 這邊各有哪些優缺點，相互可以學習些什么。（感覺給自己挖了一個大坑）

Feature

有時間就支持 Weex ，把這個 Vue.js 的改成一個完整的 Weex 的應用，變成原生以后，性能一定不會差。這樣跨平台開發就應該全了。

勘誤

如果在項目中發現了有什么不解或者發現了 bug，歡迎提交 PR 或者 issue，歡迎大神們多多指點小弟

感謝

如果喜歡這個項目，歡迎Star！

---

LICENSE

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

Copyright (C) 2007 Free Software Foundation, Inc. http://fsf.org/
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.Vue 全家桶 + Electron 開發的一個跨三端的應用

代碼地址如下：
http://www.demodashi.com/demo/11738.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權