V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Harldwell
V2EX  ›  推广

electron-vue 模仿网易云桌面应用体验

  •  
  •   Harldwell · 2018-11-05 17:48:57 +08:00 · 4572 次点击
    这是一个创建于 2194 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    electron

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

    vue

    vue 的话就不多提了,网站

    预览

    https://img0.tuicool.com/bMV7ZfZ.png!web 图片描述 图片描述 图片描述

    项目流程

    可以先去 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。

    还是根据自己的需要选择 ( https://img2.tuicool.com/iUZjuqJ.png!web)

    这些完成以后就可以像开发 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 href="//at.alicdn.com/t/font_883876_bfzwywhpal.css" rel="stylesheet"> 使用 图片描述

    打包

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

    最后

    界面是两天开发出来的。。所以某些样式不太美观。有个问题是打包以后 iconfont 不显示了,这个问题后面再解决一下,最直接的办法还是把它下到本地引用。 原文链接: https://www.jianshu.com/p/8ccf800da5bd

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2260 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:12 · PVG 00:12 · LAX 08:12 · JFK 11:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.