Electron-vue腳手架改造vue項目的方法

1. 什么是Electron

Electron可以讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你可以把它看作是專注于桌面應用而不是 web 服務器的，io.js 的一個變體。

這不意味著 Electron 是某個圖形用戶界面（GUI）庫的 JavaScript 版本。 相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。

從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。應用啟動的入口是一個與 Node.js 模塊相同的 package.json文件。

項目名稱：Electron

項目官網：https://electronjs.org/docs

2. Electron核心

electron核心我們可以分成2個部分，主進程和渲染進程。主進程連接著操作系統和渲染進程，可以把她看做頁面和計算機溝通的橋梁。渲染進程就是我們所熟悉的前端環境了。只是載體改變了，從瀏覽器變成了window。傳統的web環境我們是不能對用戶的系統就行操作的。而electron相當于node環境，我們可以在項目里使用所有的node api 。

簡單理解就是：給web項目套上一個node環境的殼。

3. 什么是Electron-vue

本案例中用到的是Electron-vue腳手架，原項目采用了vue-cli腳手架搭建開發環境，在開始編碼之前，在github上搜了一下，發現有大神寫了一個基于Vue和Electron的腳手架就是Electron-vue啦

項目名稱：electron-vue

項目地址：https://github.com/SimulatedGREG/electron-vue

項目文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/en/

4. Electron-vue改造vue項目

調整前（通過命令vue init webpack my-project 創建項目）

改造后（通過命令vue init simulatedgreg/electron-vue my-project 創建項目，在用該命令初始化vue項目時，各個參數跟vue-cli初始化項目是一樣樣的）

調整步驟

將 原項目的src目錄下的文件 拷貝到 當前項目src/renderer目錄 下。調整好之后npm run dev啟動，一片紅啊

存在問題

1.   原項目中引用的工具包，如element-ui  stylus-loader  stylus在新項目中需安裝一下

2.   原項目中在build/webpack.base.conf.js中配置的參數對應的修改到新項目的.electron-vue/webpack.renderer.config.js中

build/webpack.base.conf.js文件如下：

.electron-vue/webpack.renderer.config.js調整如下：

3.   原項目中用到了stylus預編譯，Electron-vue初始化的項目無法編譯stylus，需要在.electron-vue/webpack.renderer.config.js 中做相應配置，讓新項目能正常編譯stylus，（如果用到了less、sass等其他css預編譯語言，需設置對應的配置項）

4. 樣式出錯，Electron是基于WebKit內核的，對于flex、box-sizing、filter等屬性需加上-webkit前綴

5. 可能存在的誤區

一開始接到要將web頁面包裝成桌面應用的需求時，因為項目都是用的vue編寫，慣性固化的思維讓我認為只有vue項目通過Electron-vue的構建方式，（先安裝Electron-vue腳手架，再把原先的Vue項目拷貝過來）才能構建成桌面應用。事實是，將項目打包成桌面應用跟使用什么前端框架沒有關系，通過Electron任何項目都能打包成桌面應用（注意不是Electron-vue，Electron-vue是能快速將Vue項目打包成桌面程序的腳手架工具，整合了Vue腳手架和Electron的產物）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com