脚本宝典收集整理的这篇文章主要介绍了electron-vue模仿网易云桌面应用体验，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

像官网说的那样，electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样，只是如果有特殊的需求需要修改应用的话就要用到electron相关的api.

electron

Electron是由GIThub开发，用HTML，CSS和JavaScript来 构建跨平台桌面应用程序 的一个开源库。 Electron通过将chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和linux系统下的应用来实现这一目的。(摘之官网)

vue

vue的话就不多提了，网站

预览

项目流程

可以先去electron官网了解一下它的开发流程，知道它大体是个怎样的情况就好，后面使用的时候可以再来看看它的api.

搭建

npminstall -g vue-cli  

vue init simulatedgreg/electron-vue ele-vue

cd ele-vue

npm  install

npmrun dev

安装过程中一路回车就行，中途会有个让你选择插件的时候，也是为了后面自己手动去装，这里就根据需要选择。

electron-packager

如果你刚开始制作 electron 应用程序或只需要创建简单的可执行文件，那么 electron-packager 就可以满足你的需求。

electron-builder

如果你正在寻找完整的安装程序、自动更新的支持、使用 Travis CI 和 Appveyor 的 CI 构建、或本机 node 模块的自动重建，那么你会需要 electron-builder。

还是根据自己的需要选择

这些完成以后就可以像开发vue一样去开发项目了。

插件方面

electron-vue中也是能使用前端的ui组件的，以element-ui为例

npmi element-ui -s

然后在main.js中引入

 import tElementU IFrom 'element-ui';

import  'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

electron

一点自己的配置

mainWindow =newbrowserWindow({    

    height:670,//窗口高度

    width:1000,//窗口宽度

    frame:true,//是否显示窗口边框

    resizable:false,//可否缩放

    movable:true//可否移动})

iconfont

element的icon可能并不能满足我们的需求，这时候可以选择使用阿里的iconfont。

先去iconfont官网选择你想要的icon，

选择添加到你自己的项目

然后可以在自己的项目中选择生成，复制代码到electron-vue项目的index.ejs中，正常引用css <link rel="stylesheet" href="//at.alicdn.COM/t/font_883876_bfzwywhpal.css"> 使用

打包

直接使用 npm run build 就可以打包，若是要针对不同平台则按需添加参数，打包后的安装包在项目的build文件夹下

最后

界面是两天开发出来的。。所以某些样式不太美观。有个问题是打包以后iconfont不显示了，这个问题后面再解决一下，最直接的办法还是把它下到本地引用。

原文链接：https://www.jianshu.com/p/8cc...

脚本宝典总结

以上是脚本宝典为你收集整理的electron-vue模仿网易云桌面应用体验全部内容，希望文章能够帮你解决electron-vue模仿网易云桌面应用体验所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。