今天这篇文章是讲述一下 融合了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. VSTO中Word的查找方式

    VSTO中Word的查找方式 前言 使用C#在VSTO开发Word插件的过程,经常需要对文档中的内容进行查找和替换.在Word中进行文本的查找替换,和一般对纯文本的查找替换却不太一样.因为Word文档 ...

  2. JAVA_内部类

    内部类 什么是内部类? 将一个类A定义在另一个类B里面,里面的那个类A就称为内部类,B则称为外部类 成员内部类:定义在类中方法外的类 定义格式示例: public class Tesdt { publ ...

  3. 3 Redis 的常用五大数据类型

    2016-12-21 14:54:20 该系列文章链接NoSQL 数据库简介Redis的安装及及一些杂项基础知识Redis 的常用五大数据类型(key,string,hash,list,set,zse ...

  4. html iframe高度自适应

    想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度 这种方法有两种写法 & ...

  5. foaf

    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http: ...

  6. 章节九、3-Desired Capabilities介绍

    一.Desired Capabilities是selenium webdrive中已经写好的一个类,我们可以通过它来告诉selenium webdrive在Desired Capabilities是什 ...

  7. LeetCode算法题-Degree of an Array(Java实现)

    这是悦乐书的第294次更新,第312篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第162题(顺位题号是697).给定一个由正整数组成的非空数组,该数组的度数被定义为任意 ...

  8. Thread中yield方法

    先上一段代码 public class YieldExcemple { public static void main(String[] args) { Thread threada = new Th ...

  9. 【Teradata SQL】创建数据库和表

    1.数据库perm大小为10G Create database testbase as perm=10E9,spool=10E9; 2.创建物理表 create multiset table stg( ...

  10. .net 添加api不能访问的问题

    在一个.netmvc项目中,本身没有提供api后来想添加api就会出现问题.会发生添加的apicontrol不能访问的情况.这种情况一般是因为,global文件中,application_start( ...