1.安装nodejs

下载地址:http://nodejs.cn/
需要重启系统

2.安装electron
npm install electron -g

3.安装vue
npm install vue -g
npm install -g vue-cli

vue help : 查看vue可用命令
vue list : 查看可用的构建vue项目的模板
vue init : 根据模板来创建vue项目

4.初始化项目
vue init simulatedgreg/electron-vue electron-vue-demo

$ cd electron-vue-demo
$ yarn (or `npm install`)
$ yarn run dev (or `npm run dev`)

5.WebPack

参考:https://webpack.js.org/plugins/split-chunks-plugin/

6.Eslint

可以参考:https://cloud.tencent.com/developer/chapter/12618
.eslintrc.js

这里面的配置项要掌握,否则新增js等模块文件会提示错误

.eslintignore

忽略指定路径,格式: **/*.js

参考:https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories

自动格式化配置

参考:https://blog.csdn.net/hdchangchang/article/details/82233740

7.Electron编译配置相关

参考另一篇:https://www.cnblogs.com/guanglin/p/11120397.html

安装Electron打包
npm install -g electron-builder

打包指令:electron-builder

Electron-Vue工程初始化,以及需要掌握的相关知识的更多相关文章

  1. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  2. Electron+Vue开发跨平台桌面应用

    Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某 ...

  3. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  4. vue组件初始化过程

    之前文章有写到vue构造函数的实例化过程,只是对vue实例做了个粗略的描述,并没有说明vue组件实例化的过程.本文主要对vue组件的实例化过程做一些简要的描述. 组件的实例化与vue构造函数的实例化, ...

  5. vue实战_从头开始搭建vue工程

    写在前面:vue工程入口文件分析 /index.html,/src/main.js,/src/APP.vue /index.html文件示例: <!DOCTYPE html> <ht ...

  6. Electron+Vue – 基础学习(1): 创建项目

    Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Ele ...

  7. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  8. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  9. electron+vue 环境搭建

    一.环境介绍及会遇到的困难 electron是一款比较流行的桌面可视化开发工具,通过html+js+css实现桌面应用,优点就是多平台开发以及UI好看.缺点是外网npm仓库速度慢.话不多说开始我的教程 ...

  10. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

随机推荐

  1. Ehcache 入门详解 (转)

    一:目录 EhCache 简介 Hello World 示例 Spring 整合 二: 简介 2.1.基本介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hiberna ...

  2. Jmeter 设置默认语言为中文

    1.在apache-jmeter-4.0\bin目录下,打开jmeter.properties; 2.将#language=en改为#language=cn,保存 3.重新启动jmeter.

  3. 07.AutoMapper 之列表和数组(Lists and Arrays)

    https://www.jianshu.com/p/419a3b7f12d5 列表和数组(Lists and Arrays) AutoMapper只需要配置元素类型的映射配置,不需要针对列表和数组进行 ...

  4. 史上最简单JS复制功能,兼容安卓ios!

    1.JS复制原理: 被复制内容的元素不能被其他元素遮盖,否则无效.  (设置opacity透明为0,不可以设置display:none); 2.常规的复制方法 function copyUrl2() ...

  5. xampp配置多域名

    重要的事情: 前提: vhost.conf被引入 修改两个文件,文件所在路径,看图片上sublime编辑器,hosts和vhost.conf配置的域名必须一致 参考文档:http://blog.csd ...

  6. 错误代码errno值的含义

    错误代码errno值的含义 查看错误代码errno是调试程序的一个重要方法.当C api函数发生异常时,一般会将errno变量(需include errno.h)赋一个整数值,不同的值表示不同的含义, ...

  7. mybatis返回map结果集

    今天突发奇想,想用mybatis返回一个map结果集,结果我就整了一下午,不过终于解决了 1.如果你确定返回的数据只有一条,你可以这样整 xml中: <select id="searc ...

  8. iconv_close - 关闭字符转换描述符

    总览 (SYNOPSIS) #include <iconv.h> int iconv_close (iconv_t cd); 描述 (DESCRIPTION) iconv_close 函数 ...

  9. Laravel5如何向闭合函数内传递参数 where function 传参

    如上,怎么将$title 像$query一样,在函数内部使用? $result = UserMenus::with(['menu'=>function($query){ $query->w ...

  10. 利用zookeeper部署kafka集群

    1.准备工作: iptables -F      #关闭防火墙 systemctl stop firewalld.service #关闭防火墙 准备三台虚拟机并放入/etc/hosts下 192.16 ...