美文网首页让前端飞程序员工具箱
用electron加Vuejs开发桌面程序

用electron加Vuejs开发桌面程序

作者: DigiHacker | 来源:发表于2018-09-22 11:11 被阅读31次

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

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

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


    install.png

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

    index.png

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


    html.png

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


    template.png

    最后显示的效果如下

    UI.png

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

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

    相关文章

      网友评论

        本文标题:用electron加Vuejs开发桌面程序

        本文链接:https://www.haomeiwen.com/subject/utntoftx.html