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)物）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue的nextTick方法是用來在下次DOM更新周期中執(zhí)行回調(diào)函數(shù)的方法，用于DOM操作后獲取DOM更新后的狀態(tài)，使用場景包括異步更新DOM、獲取更新后元素的位置等情況，一般結(jié)合Vue的異步更新機制和watch監(jiān)聽器使用，實現(xiàn)方式可使用Promise、setTimeout等異步方法2023-04-04
這篇文章主要介紹了vue3實現(xiàn)v-model原理詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue3的setup的使用和原理,結(jié)合實例形式詳細分析了vue3 setup的基本功能、原理與使用方法,需要的朋友可以參考下2023-06-06
關(guān)于Element-UI可編輯表格的實現(xiàn)過程
這篇文章主要介紹了關(guān)于Element-UI可編輯表格的實現(xiàn)過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Element-UI Table組件上添加列拖拽效果實現(xiàn)方法
這篇文章主要為大家詳細介紹了Element-UI Table組件上添加列拖拽效果的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼
本文主要介紹了vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題
這篇文章主要介紹了vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue請求JSON Server服務(wù)器數(shù)據(jù)的實現(xiàn)方法
這篇文章主要介紹了Vue請求JSON Server服務(wù)器數(shù)據(jù)的實現(xiàn)方法,需要的朋友可以參考下2018-11-11
vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動添加前綴
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動添加前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
圖片和文件上傳在很多項目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03