Electron+Vue – 基础学习(1): 创建项目
Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅。下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Electron封装。
一、创建Vue项目 + Electron封装
1、创建Vue项目
(1)、通过 Vue脚手架工具 vue-cli 创建Vue项目:vue init webpack xxxxxx (注:项目名称中不能出现大写字母)
vue init webpack electron-vue
等待Vue项目初始化完成。
Vue项目创建完成,通过CMD命令行进入项目存放目录 或 代码编辑工具(vscode、webstorm)等直接打开该项目,执行命令:npm run dev 启动项目。
npm run dev
项目启动成功。
(2)、执行命令:npm run build 打包项目,项目打包完成以后会在项目文件夹内自动新建一个 dist文件夹。到这一步为止,Vue这边的操作已经完成,下面进入 dist文件夹开始 Electron 封装。
npm run build
二、进入dist文件夹,进行Electron 封装
1、在dist文件夹内 创建主程序入口(main.js) 和 配置文件package.json
main.js
const {app, BrowserWindow} = require('electron'); //引入electron
let win;
let windowConfig = { //窗口配置程序运行窗口的大小
width: 800,
height: 600
}; function createWindow() {
win = new BrowserWindow(windowConfig); //创建一个窗口
win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //开启调试工具
win.on('close', () => { //回收BrowserWindow对象
win = null;
});
win.on('resize', () => {
win.reload();
});
} app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
});
package.json
{
"name": "electron-vue",
"version": "1.0.0",
"description": "electron-vue",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . electron-vue --win --out electron-vue --arch=x64 --electron-version=7.1.9"
},
"author": "",
"private": true
}
2、本地安装electron,然后安装项目依赖包。
npm install --save-dev electron 或 cnpm install --save-dev electron
npm install 或 cnpm install
3、执行启动命令:npm start,就可以启动Electron + Vue项目了。
npm start
二、通过 electron-forge 创建项目
1、执行命令:electron-forge init xxxxxx --template=vue (注:模板也可以使用 Electron版Vue:vue-electron,但vue-electron版本比较老,很多更新都没有,所以不建议使用)
electron-forge init vue-project --template=vue
electron-forge 创建 Vue项目和 创建 electron项目差不多。区别在于:项目名称后面跟了一个模板参数 template,这个参数其实一直都有,只是之前创建 electron项目时省略了。
2、等待项目创建完毕,进入项目存放目录,执行命令:npm start 或 electron-forge start,启动项目,如下图所示:
npm start 或 electron-forge start
结语:两种创建项目的方式各有千秋,第一种方式优势在于创建过程一步步清晰明了,便于理解每个过程的用处,劣势则是过程繁琐,坑很多;第二种优劣势则恰好跟第一种相反。建议先通过第一种方式创建完项目后,再通过第二种方式创建工程项目,便于以后项目打包和上线(第一种方式以后打包,忒费劲了)。
Electron+Vue – 基础学习(1): 创建项目的更多相关文章
- Electron+Vue – 基础学习(2): 项目打包成exe桌面应用
项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工 ...
- 从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(二)-创建项目 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Vue.js用脚手架创建项目
安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
随机推荐
- xpath写法汇总(适用于appium、robotframework)
1.移动端应用,content-des包含“订单号” xpath=//android.view.View[contains(@content-desc,"订单号:")] 2.移动端 ...
- [HNOI2008]Cards(dp,Burnside引理)
Burnside引理: 参考自 某大佬对Burnside引理和Polya定理的讲解 相关概念 群:在数学中,群表示一个拥有满足封闭性.满足结合律.有单位元.有逆元的二元运算的代数结构. 置换群:由有限 ...
- CSS-17-页面布局
页面布局: 静态布局: 静态布局:元素不变的布局. 布局特点:缩小后内容被遮挡,拖动滚动条显示布局 设计方法: PC:居中布局,所有样式使用绝对宽度和高度 移动设备:另外建立移动网站,以m.域名为域名 ...
- 20190710双人开黑CF模拟赛
Codeforces Round #571 (Div. 2) 日常被tanao_大佬带飞,我AC了A和C(B题没了...否则tanao_大佬肯定把我吊打) A. Vus the Cossack and ...
- OpenResty学习指南(二)
我的个人博客:https://www.luozhiyun.com/ 数据结构table table并没有区分开数组.哈希.集合等概念,而是揉在了一起. local color = {first = & ...
- 二、Django学习之增删改查
增加数据 第一种方式 def index(request): #创建记录方式1 #实例化要添加的记录(对象) student_obj = models.Student( name='dazhuang' ...
- Java:线程的六种状态及转化
目录 Java:线程的六种状态及转化 一.新建状态(NEW) 二.运行状态(RUNNABLE) 就绪状态(READY) 运行状态(RUNNING) 三.阻塞状态(BLOCKED) 四.等待状态(WAI ...
- 聊聊“装箱”在CLR内部的实现
原文连接:https://mattwarren.org/2017/08/02/A-look-at-the-internals-of-boxing-in-the-CLR/ 作者 Matt Warren. ...
- BZOJ 3343 教主的魔法(分块)
题意: 有一个1e6的数组,t次操作:将[l,r]内的值增加w,或者查询[l,r]内的值大于等于add的 思路: 分块,块大小为sqrt(n),每次只需要暴力头尾两块,中间的整块打标记, 对于查询查操 ...
- [Effective Java 读书笔记] 第7章 方法
第39条 必要时进行保护性拷贝 对于可变类,如果作为参数传入到自己的类里,并作为自己类的数据使用存储时,需要进行保护性拷贝,比如Date是可变的,如果传入一个Date类,最好做一个保护性拷贝,以免在调 ...