使用Electron-vue腳手架怎么搭建一個(gè)vue項(xiàng)目

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用Electron-vue腳手架怎么搭建一個(gè)vue項(xiàng)目，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1. 什么是Electron

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

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

2. Electron核心

electron核心我們可以分成2個(gè)部分，主進(jìn)程和渲染進(jìn)程。主進(jìn)程連接著操作系統(tǒng)和渲染進(jìn)程，可以把她看做頁面和計(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)整前（通過命令vue init webpack my-project 創(chuàng)建項(xiàng)目）

改造后（通過命令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)，一片紅啊

存在問題

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)目無法編譯stylus，需要在.electron-vue/webpack.renderer.config.js 中做相應(yīng)配置，讓新項(xiàng)目能正常編譯stylus，（如果用到了less、sass等其他css預(yù)編譯語言，需設(shè)置對(duì)應(yīng)的配置項(xiàng)）

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

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

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

上述就是小編為大家分享的使用Electron-vue腳手架怎么搭建一個(gè)vue項(xiàng)目了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。