快捷導(dǎo)航

Electron-vue腳手架改造vue項(xiàng)目的方法

更新時(shí)間：2018年10月22日 11:14:09 作者：Hayley2016

這篇文章主要介紹了Electron-vue腳手架改造vue項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1. 什么是Electron

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

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

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

項(xiàng)目名稱：Electron

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

2. Electron核心

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

簡(jiǎn)單理解就是：給web項(xiàng)目套上一個(gè)node環(huán)境的殼。

3. 什么是Electron-vue

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

項(xiàng)目名稱：electron-vue

項(xiàng)目地址：https://github.com/SimulatedGREG/electron-vue

項(xiàng)目文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/en/

4. Electron-vue改造vue項(xiàng)目

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

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

調(diào)整步驟

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

存在問(wèn)題

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

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

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

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

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: