Electron中與Vue集成流程

場景

用HTML和CSS和JS構建跨平台桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試后，那么Electron怎樣實現與vue集成。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

全局安裝vue腳手架

npm install -g vue-cli

如果安裝了cnpm可以使用

cnpm install -g vue-cli

 

 

創建工程

進入到磁盤中某目錄，然后在此處打開命令行

vue init simulatedgreg/electron-vue electron-vue-start

最后面是跟得項目名

 

 

 

然后會提示一些選項，根據自己的業務需求進行配置，下面是推薦配置

 

 

 

安裝項目依賴

然后進入到剛才新建的項目

cd electron-vue-start

然后使用

npm install

或者

cnpm install

 

 

安裝依賴成功

 

 

 

運行項目

首先全局安裝yarn

cnpm install -g yarn

 

 

運行項目

yarn dev

 

 

效果