亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

用electron加Vuejs開發桌面程序

標簽:
Vue.js

electron是一个js的桌面程序框架,有很多程序基于它开发,比如VsCode,Atom等。而Vue.js是我们国人开发的著名js框架。用这两个结合开发就是强强联手,只要会网页开发就能写桌面程序,感觉不要太好

首先我们需要先安装nodejs+npm, 因为太慢,就需要用国内的镜像服务器了,比如阿里的

然后执行以下命令建一个基于vue的electron项目,项目名要替换成你的目录


webp

install.png

最后就会看到一个程序启动

webp

index.png

打开项目目录,核心的三个文件都在src子目录中,index.html, index.js, test.vue. 现在只是一个简单的hello world。 然后桌面程序最重要的是能访问本地电脑文件。现在我们加一些代码访问剪贴板和D盘根目录。剪贴板需要electron的API, 而本地文件则需要Nodejs的fs模块


webp

html.png

然后修改下Vue模板,跟平常的Vue都是一致的,增加一个files数组去保存文件名


webp

template.png

最后显示的效果如下

webp

UI.png

右边就是Chrome的控制台,可以用ctrl+shift+i 开启,这样有什么错误的话,直接可以调试了。

左边如果加上文件夹图标,就是一个标准的文件管理器了。现在你可以用你的Web开发经验开发你的桌面程序了!!!



作者:DigiHacker
链接:https://www.jianshu.com/p/d038bac1e21e


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消