vue-electron脚手架安装及说明 打包基于Vue的 桌面应用程序

今天这篇文章是讲述一下 融合了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搭建项目可以说是没有任何区别，很赞是吧！

原文地址：https://www.cnblogs.com/mica/p/10749190.html

时间： 2024-10-27 18:56:25

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

vue的脚手架安装教程和使用目录的介绍

本次教程的全在在node上面安装进行,如果不会使用可以翻看以前的教程. 因为vue近期刚发布了第四代的版本,还不是十分的稳定,我们本次使用的是3带的版本 1.安装vue项目的脚手架 在终端   >cnpm i @vue/[email protected] -g    //安装第三代的版本 在安装完成后 > vue create myapp   //新建一个名字叫做myapp的文件夹 以下是安装步骤,具体解释可以看一下.如果不理解可以留言 * 选择 vue 项目的 东西 除了typesctipt

Vue 去脚手架插件，自动加载vue文件

接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都不是问题. 读取 读取不用再聊了,一句话,远程请求,只要服务器答应,这个不麻烦. 读取之后的处理 上回,忙着把他渲染出来,所以都没想过其他事情,那可做的事情其实很多. 例如 1. 放到localstrage里面存起来,这对于复用组件是会提速很多的不用http协议传输,只在本地读取一个字符串 2. 或

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

书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱自乐的项目中)加载的自定义组件是不会重名的(应该不会吧,反正就是让他不会的意思),那就每个Vue中加组件名做前缀,然后duang,写入dom. 规规矩矩的放在head里,齐活了 更新一下我那个牛逼的文件 // vue插件引入 Vue.use({ // 插件初始化函数 install: functio

vue安装（vue-cli脚手架安装）

安装方法1:<script> 标签引入 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入.Vue 会被注册为一个全局变量. vue.min.js的版本 开发版本:包含完整的警告和调试模式 生产版本:删除了警告,24.72kb min+gzip 重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告.(开发环境不要用最小压缩版,不然就失去了错误提示和警告!) 安装方法2:使用 CDN 方法 unpkg, 会保持和 npm 发布

基于Vue的Ui框架

饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动端的ui框架 http://mint-ui.github.io/#!/en mintUI的使用: 1.找官网 2.安装 npm install mint-ui -S -S表示 --save 3.引入mint Ui的css 和 插件 import Mint from 'mint-ui'; Vue.use(Mint); im

vue.js开发环境搭建以及创建一个vue实例

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

基于 vue 全家桶的 spa 项目脚手架

项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案.通过这个项目模板,可以快速搭建起用于前后端分离后的单页应用开发环境,项

vue开发搭建（npm安装 + vue脚手架安装）

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt

vue脚手架安装

//---------------------------------------startvue新版脚手架 //卸载旧版本npm uninstall vue-cli -g cnpm install -g @vue/cli或yarn global add @vue/cli //新版本 vue --versioncnpm install webpack -g e:cd E:\AvsWorkSapcevue create ysxVue //启动项目 yarn serve // OR npm run