electron-vue 入门

electron-vue 简要介绍

vue只是在renderer进程里使用的框架，不涉及到main进程。如下图：

electron-vue给我感觉最好的是如下：
1、只有一个package.json。而大部分其他的项目结构依然在使用两个package.json来应对main进程和renderer进程的依赖库。
2、内建完整的vue全家桶，省去再次配置vue-router和vuex的一些初期操作。
3、内建完整的webpack开发、生产等配置，开发环境舒适。
4、内建完整的开发、构建等npm scripts，使用非常方便。
5、内建完整的Travis-ci、Appveyor配置脚本，只需少数修改就能做到利用CI自动构建的应用发布。
6、完善的文档，清晰的项目结构。
大体的项目结构如下，根据选择的不同设置结构会有所不同：

my-project
├─ .electron-vue
│  └─ <build/development>.js files
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/  # npm install
├─ src
│  ├─ main # 主进程
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer # 渲染进程
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ test
│  ├─ e2e
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ utils.js
│  ├─ unit
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ karma.config.js
│  └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

可以看到我们主要关注的两个文件夹：src/main和src/renderer分别对应的是main进程和renderer进程。我们的开发大体上也是围绕这两个文件夹展开。

electron-vue 安装

# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project# 安装依赖
cd my-project
yarn # or npm install
# 进入开发模式
yarn run dev # or npm run dev

electron-vue 入门相关推荐

Electron从入门到精通
一,Electron 快速入门 1.简介 Electron是利用web前端技术进行桌面应用开发的一套框架,它是由Github开发的,利用HTML.CSS.JavaScript来构建跨平台桌面应用程序的 ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
Electron开发入门
首先需要安装NodeJS. 设置npm, npm config set registry "https://registry.npm.taobao.org/" 安装Electron ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...
建立项目接口文档_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器...
在以前的文档中,我们构建了vue项目的整体架构,详见vue入门:vue项目架构设计起步,现在我们主要对其中的mock server 进行完善. 一.概述前后端分离的项目优点之一就是可以前后端并行开发 ...
Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...

electron-vue 入门

electron-vue 简要介绍

electron-vue 安装

electron-vue 入门相关推荐

最新文章

热门文章