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

1. 什么是Electron

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

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

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

項目名稱：Electron

項目官網(wǎng)：https://electronjs.org/docs

2. Electron核心

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

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

3. 什么是Electron-vue

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

項目名稱：electron-vue

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

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

4. Electron-vue改造vue項目

調(diào)整前（通過命令vue init webpack my-project 創(chuàng)建項目）

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

調(diào)整步驟

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

存在問題

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

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

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

.electron-vue/webpack.renderer.config.js調(diào)整如下：

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

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

5. 可能存在的誤區(qū)

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

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