vue构建electron桌面应用

2023-05-16

    electron桌面应用,可以结合前端框架vue使用,而我们也可以通过vue工具来构建electron的应用,这就需要我们全局安装vue-cli,通过vue构建electron应用的脚手架,推荐使用SimulatedGREG/electron-vue,这个与我们的webpack构建方式很像,也是vue init simulatedgreg/electron-vue projectname。

    这里给出一个示例:

    1、安装vue-cli。

    $ npm install -g vue-cli

    全局有了vue,我们就可以通过vue命令来构建应用了,可以检查一下vue版本。

    

    2、通过simulatedgreg/electron-cli脚手架构建应用。

     

    项目初始化过程中会提示一些设置信息,这些信息会加入package.json中,可以根据需要设置,一般默认即可。

    项目初始化完成,会有个安装依赖,以及开发模式下运行的命令:

    

    3、根据命令,我们需要进入项目目录,然后通过yarn 或者npm安装依赖,然后启动项目,我这里使用的是npm。

    $ cd firstapp
    $ npm install

       

    4、开发模式启动项目:

    $ npm run dev 

    启动项目的过程截图:

     

    完整的界面:

     

    其实整个构建过程,和普通的vue项目构建并没有太大的区别,就是使用的脚手架不一样而已。这里使用的是simulatedgreg/electron-vue,我们可以在用户目录下的.vue-templates目录中看看我们的脚手架信息。

     

    simulatedgreg-electron-vue和webpack都会在.vue-templates目录下。 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue构建electron桌面应用 的相关文章

随机推荐