今天这篇文章是讲述一下 融合了vue-cli+electron的一种新的脚手架,省去许多繁琐配置,即vue-electron。

下面就说一下安装和使用,假设你的电脑已经安装node.js,并且已经全局搭建好vue-cli脚手架,如果没有的话,打开终端:$npm install --global vue-cli 全局安装。

1.新建文件夹,cd 到你将要安装的文件夹目录,$vue init simulatedgreg/electron-vue

这一步骤极其相似于当初安装vue-cli脚手架时,一个一个步骤来,截几张图

类似于这样 选择 enter yes 或者 no 看自己的选择

注意这一步呢,我选择了electron-packager 项。到这里你就可以看到,本来的空文件夹里现在新建了vue-electron基础文件

2.$npm install  这一步主要是安装依赖,耗时有点久。完毕后项目内多了node_modules 文件夹,里面东西较多。如图:

3.$npm run dev  会出现的界面如图:右下角是一起出来的控制台

哈哈,完美呈现出来桌面应用。

4.打包。先看看项目package.json文件截图

scripts内各种打包命令,其中就包括Mac、Windows、Linux三大平台。例如我想在Mac上打包运行,$npm run build:darwin  就会在项目的build文件夹下生成一个应用程序,以此类推,,,$npm run build:win32 等

vue-electron脚手架最大好处就是我们不要在Vue项目里手动配置electron了,极好的融合了Vue-cli+electron ,省去开发者大把时间去配置。

另外不得不说一下,vue-electron主要业务逻辑都放在了src->renderer文件夹内去写,和之前的vue-cli搭建项目可以说是没有任何区别,很赞是吧!

vue-electron脚手架安装及说明 打包基于Vue的 桌面应用程序的更多相关文章

  1. vue - vue-cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  2. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  3. Electron打包H5网页为桌面运行程序

    一.安装配置环境 Electron(一种桌面应用程序运行时),Electron 把 Chromium 和 Node 合并到一个单独的运行时里面,很适合开发桌面 web 形式的应用程序,通过Node它提 ...

  4. Vue devtool插件安装后无法使用,提示“vue.js not detected”的解决方法

    vue devtool下载 极简插件  github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序   ①:直接将后缀为crx的安装包拖进下图区域即可自动安装     ② ...

  5. Vue 去脚手架插件,自动加载vue文件

    接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都 ...

  6. Vue 去脚手架插件,自动加载vue文件,style怎么办

    书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱 ...

  7. vue之cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  8. Vue学习笔记之vue-cli脚手架安装和webpack-simple模板项目生成

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  9. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

随机推荐

  1. Java开发笔记(五十五)关键字static的用法

    前面介绍嵌套类的时候讲到了关键字static,用static修饰类,该类就变成了嵌套类.从嵌套类的用法可知,其它地方访问嵌套类之时,无需动态创建外层类的实例,直接创建嵌套类的实例就行.其实static ...

  2. asp.net DES加密解密

    数据加密标准DES加密算法是一种对称加密算法,DES 使用一个 56 位的密钥以及附加的 8 位奇偶校验位,产生最大 64 位的分组大小.这是一个迭代的分组密码,使用称为 Feistel 的技术,其中 ...

  3. TJU ACM-ICPC Online Judge—1191 The Worm Turns

    B - The Worm Turns Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Su ...

  4. 程序员50题(JS版本)(二)

    程序6:用*号输出字母C的图案 console.log(' ****'); console.log(' ***'); console.log(' **'); console.log(' *'); co ...

  5. C语言使用HZK16显示每个像素的代码

    下边内容段是关于C语言使用HZK16显示每个像素的内容. #include<stdio.h>#include<stdlib.h>void main(){ int i,j; ch ...

  6. [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt

    [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt --//前几天做了sql语句在mutexes上的探究.今天对比不同_mutex_wait_scheme模式cpu ...

  7. SQLServer无法删除登录名'***',因为该用户当前正处于登录状态解决方法

    问题描述: sqlserver在删除登录名的时候提示删除失败 标题: Microsoft SQL Server Management Studio -------------------------- ...

  8. 我的第一个python web开发框架(24)——系统重构与ORM

    小白弄完代码版本管理和接口文档后,兴奋的找到老菜. 小白:老大,我已经按你讲的要求,将代码版本管理和接口文档都搞好了.从项目开始到现在,除了代码编写,感觉学会好多东西啊. 老菜:嗯嗯,实战确实需要掌握 ...

  9. Nginx 的 access log 如何以 json 形式记录?

    Nginx 的 access log 默认是以空格分隔的字符串形式记录的,格式如下 log_format proxy '[$time_local] $remote_addr ' '$protocol ...

  10. ZooKeeper学习总结 第一篇:ZooKeeper快速入门

    1. 概述 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 它有如下的一些特点: 简单 Zookeeper的核 ...