欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于 Vue 的 Electron 項目搭建過程圖文詳解

 更新時間:2020年07月22日 08:38:34   作者:麥葉  
這篇文章主要介紹了基于 Vue 的 Electron 項目搭建過程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

Electron 應用技術體系推薦

目錄結構

demo(項目名稱)
├─ .electron-vue(webpack配置文件)
│ └─ build.js(生產(chǎn)環(huán)境構建代碼) 
| └─ dev-client.js(熱加載相關)
│ └─ dev-runner.js(開發(fā)環(huán)境啟動入口)
│ └─ webpack.main.config.js(主進程配置文件)
│ └─ webpack.renderer.config.js(渲染進程配置文件)
│ └─ webpack.web.config.js
├─ build(是文件打包使用的)
│ └─ win-unpacked/
│ │ ├─ locales(地區(qū)語言資源包)
│ │ ├─ resources(地區(qū)語言資源包)
│ │ ├─ *.dll(動態(tài)鏈接庫)
├─ dist(打包后的文件資源)
│ ├─ electron
| ├─ web
├─ node_modules/(依賴目錄)
├─ src(源碼)
│ ├─ main(主進程)
│ │ └─ index.dev.js(捆綁index.js)
│ │ └─ index.js(主進程的進程JS)
│ ├─ renderer(渲染進程)
│ │ ├─ 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)境搭建

默認有 node 環(huán)境.

先安裝 electron vue vue-cli ,因為 electron-vue 中有內置 webpack ,無需再裝一個獨立的 webpack 。

npm install -g electron
npm install -g vue
npm install -g vue-cli

創(chuàng)建一個空文件夾,DOS命令窗口進入該文件夾位置,初始化一個 electron-vue 項目。

//使用vue-cli來安裝electron-vue的模板
vue init simulatedgreg/electron-vue demo

注:demo 是項目名稱

安裝依賴

npm install

啟動項目(開發(fā)環(huán)境)

npm run dev

完成1~3步驟,一個基于 vue 的 electron 項目就初始化完成了。

啟動項目后效果圖如下:

 

問題解決 初始化報錯

當運行 npm init simulatedgreg/electron-vue demo 命令初始化項目時報錯,大致意思說找不到 electron-vue 或者安裝 create-electron-vue 等原因導致失敗,可以選擇重新運行命令多試幾次,或者先下載electron-vue源碼,然后生成自己的項目模板。下面說后者的步驟。

1.electron-vue 下載

2.cmd 切換到該項目根目錄

3.初始化一個自己的項目。初始化完之后可以再命令對應的“目錄路徑”看到你的項目

vue init 項目路徑 項目名

4.完成

啟動項目報錯

若第一次啟動項目報錯如下:

大概意思是 提示 src/index.ejs 中沒有定義 process 。

原因分析:大概是 html-webpack-plugin 插件處理該ejs文件時,沒有讀到該插件對應有 process 屬性,應該是去配置文件 "./electron-vue/webpack.render.config.js" 文件中讀取 HtmlWebpackPlugin 插件的 process 屬性,而 "./electron-vue/webpack.render.config.js" 并未定義該屬性,固報此錯。

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)定版即可。

注釋:技術推薦Electron 應用技術體系推薦引用他人的electron-vue項目講解的視頻截圖,找不到鏈接了就不寫上了。

到此這篇關于基于 Vue 的 Electron 項目搭建的文章就介紹到這了,更多相關基于 Vue 的 Electron 項目搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue項目中跳轉到外部鏈接的實例講解

    vue項目中跳轉到外部鏈接的實例講解

    今天小編就為大家分享一篇vue項目中跳轉到外部鏈接的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • VUE中data配置項詳細解析

    VUE中data配置項詳細解析

    data屬性是Vue實例的數(shù)據(jù)對象,可以綁定的是對象或者是函數(shù),下面這篇文章主要給大家介紹了關于VUE中data配置項詳細解析的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • Vue-router優(yōu)化import引入過多導致index文件臃腫問題

    Vue-router優(yōu)化import引入過多導致index文件臃腫問題

    這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能

    Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能

    在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧
    2023-08-08
  • vue+el-table實現(xiàn)合并單元格

    vue+el-table實現(xiàn)合并單元格

    這篇文章主要為大家詳細介紹了vue+el-table實現(xiàn)合并單元格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue 中 filter 與 computed 的區(qū)別與用法解析

    Vue 中 filter 與 computed 的區(qū)別與用法解析

    這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-11-11
  • Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)

    Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)

    最近vue.js 非?;馃?,小編也趁機學習了下vuejs的一些基礎知識,于是嘗試做一個像微信平臺里的菜單編輯器功能,下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現(xiàn)代碼分享給大家,需要的朋友參考下
    2018-05-05
  • vue element ui validate 主動觸發(fā)錯誤提示操作

    vue element ui validate 主動觸發(fā)錯誤提示操作

    這篇文章主要介紹了vue element ui validate 主動觸發(fā)錯誤提示操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Element基于el-input數(shù)字范圍輸入框的實現(xiàn)

    Element基于el-input數(shù)字范圍輸入框的實現(xiàn)

    本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • 詳解Vue組件插槽的使用以及調用組件內的方法

    詳解Vue組件插槽的使用以及調用組件內的方法

    在本篇文章里我們給大家分享了Vue組件插槽的使用以及調用組件內的方法相關知識點,有需要的朋友們參考下。
    2018-11-11

最新評論