基于 Vue 的 Electron 項(xiàng)目搭建過程圖文詳解
Electron 應(yīng)用技術(shù)體系推薦
目錄結(jié)構(gòu)
demo(項(xiàng)目名稱) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生產(chǎn)環(huán)境構(gòu)建代碼) | └─ dev-client.js(熱加載相關(guān)) │ └─ dev-runner.js(開發(fā)環(huán)境啟動(dòng)入口) │ └─ webpack.main.config.js(主進(jìn)程配置文件) │ └─ webpack.renderer.config.js(渲染進(jìn)程配置文件) │ └─ webpack.web.config.js ├─ build(是文件打包使用的) │ └─ win-unpacked/ │ │ ├─ locales(地區(qū)語言資源包) │ │ ├─ resources(地區(qū)語言資源包) │ │ ├─ *.dll(動(dòng)態(tài)鏈接庫) ├─ dist(打包后的文件資源) │ ├─ electron | ├─ web ├─ node_modules/(依賴目錄) ├─ src(源碼) │ ├─ main(主進(jìn)程) │ │ └─ index.dev.js(捆綁index.js) │ │ └─ index.js(主進(jìn)程的進(jìn)程JS) │ ├─ renderer(渲染進(jìn)程) │ │ ├─ assets/(放置靜態(tài)資源,如圖片,視頻,靜態(tài)配置) │ │ ├─ components/(放置vue頁面) │ │ ├─ router/(放置頁面路由) │ │ ├─ store/(放置公共模塊,如vuex) │ │ ├─ App.vue │ │ └─ main.js │ └─ index.ejs ├─ static/(靜態(tài)文件) ├─ test │ ├─ e2e │ │ ├─ specs/ │ │ ├─ index.js │ │ └─ utils.js │ ├─ unit │ │ ├─ specs/ │ │ ├─ index.js │ │ └─ karma.config.js │ └─ .eslintrc#全局配置文件 ├─ .babelrc ├─ .eslintignore ├─ .eslintrc.js ├─ .gitignore ├─ package.json └─ README.md
環(huán)境搭建
默認(rèn)有 node 環(huán)境.
先安裝 electron
vue
vue-cli
,因?yàn)?electron-vue
中有內(nèi)置 webpack
,無需再裝一個(gè)獨(dú)立的 webpack
。
npm install -g electron npm install -g vue npm install -g vue-cli
創(chuàng)建一個(gè)空文件夾,DOS命令窗口進(jìn)入該文件夾位置,初始化一個(gè) electron-vue
項(xiàng)目。
//使用vue-cli來安裝electron-vue的模板 vue init simulatedgreg/electron-vue demo
注:demo 是項(xiàng)目名稱
安裝依賴
npm install
啟動(dòng)項(xiàng)目(開發(fā)環(huán)境)
npm run dev
完成1~3步驟,一個(gè)基于 vue 的 electron 項(xiàng)目就初始化完成了。
啟動(dòng)項(xiàng)目后效果圖如下:
問題解決 初始化報(bào)錯(cuò)
當(dāng)運(yùn)行 npm init simulatedgreg/electron-vue demo
命令初始化項(xiàng)目時(shí)報(bào)錯(cuò),大致意思說找不到 electron-vue 或者安裝 create-electron-vue 等原因?qū)е率?,可以選擇重新運(yùn)行命令多試幾次,或者先下載electron-vue源碼,然后生成自己的項(xiàng)目模板。下面說后者的步驟。
1.electron-vue 下載
2.cmd 切換到該項(xiàng)目根目錄
3.初始化一個(gè)自己的項(xiàng)目。初始化完之后可以再命令對(duì)應(yīng)的“目錄路徑”看到你的項(xiàng)目
vue init 項(xiàng)目路徑 項(xiàng)目名
4.完成
啟動(dòng)項(xiàng)目報(bào)錯(cuò)
若第一次啟動(dòng)項(xiàng)目報(bào)錯(cuò)如下:
大概意思是 提示 src/index.ejs 中沒有定義 process 。
原因分析:大概是 html-webpack-plugin
插件處理該ejs文件時(shí),沒有讀到該插件對(duì)應(yīng)有 process
屬性,應(yīng)該是去配置文件 "./electron-vue/webpack.render.config.js" 文件中讀取 HtmlWebpackPlugin
插件的 process
屬性,而 "./electron-vue/webpack.render.config.js" 并未定義該屬性,固報(bào)此錯(cuò)。
index.ejs 源碼:
配置文件中插件配置代碼:
解決方法一(推薦):
把index.ejs文件中的 <% if (!process.browser) { %>
改成
<% if (!htmlWebpackPlugin.options.process.browser) { %> ,
改完后代碼:
index.ejs:
./electron-vue/webpack.render.config.js:
解決方法二:直接刪除下圖中紅框框住部分,沒有什么影響:
解決方法三:將node 12.x版本還原到10.16的穩(wěn)定版即可。
注釋:技術(shù)推薦Electron 應(yīng)用技術(shù)體系推薦引用他人的electron-vue項(xiàng)目講解的視頻截圖,找不到鏈接了就不寫上了。
到此這篇關(guān)于基于 Vue 的 Electron 項(xiàng)目搭建的文章就介紹到這了,更多相關(guān)基于 Vue 的 Electron 項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08vue+el-table實(shí)現(xiàn)合并單元格
這篇文章主要為大家詳細(xì)介紹了vue+el-table實(shí)現(xiàn)合并單元格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
最近vue.js 非?;馃幔【幰渤脵C(jī)學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識(shí),于是嘗試做一個(gè)像微信平臺(tái)里的菜單編輯器功能,下面腳本之家小編把vue.js 微信公眾號(hào)菜單編輯器功能的實(shí)現(xiàn)代碼分享給大家,需要的朋友參考下2018-05-05vue element ui validate 主動(dòng)觸發(fā)錯(cuò)誤提示操作
這篇文章主要介紹了vue element ui validate 主動(dòng)觸發(fā)錯(cuò)誤提示操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04詳解Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調(diào)用組件內(nèi)的方法相關(guān)知識(shí)點(diǎn),有需要的朋友們參考下。2018-11-11