Electron-vue之Renderer进程开发 路由拦截、登陆页面
文章首发于：clawhub.club
Vue Router
导航守卫前置：12345const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})
后置：123router.afterEach((to, from) => { // ...})
我的使用：1234567891011121314151617181920212223242526272829import router from './router'import store from './store'import NProgress from 'nprogress' // Progress 进度条import 'nprogress/nprogress.css'// Progress 进度条样式const whiteList = ['/login ...
Electron-vue之Renderer进程开发 vue-router、页面布局
文章首发于：clawhub.club
前端真的好难！！！！
今儿主要把路由配置测试了一下，页面简单的划分了一个布局。
vue-router官方文档：https://router.vuejs.org/zh/我就是简单的测试一下，因为页面又不多，又没有权限管理，即不需要动态路由，都是静态的。跳转路由测试也是简单的使用，没有参数的传递。
配置12345678910111213141516171819202122232425262728293031323334353637383940414243import Vue from 'vue'import Router from 'vue-router'// Layoutimport Layout from '@/views/layout/Layout'Vue.use(Router)export const constantRouterMap = [{ path: '/login', component: require('@/views/l ...
Electron-vue之Main进程开发-Tray、Menu、dialog
文章首发于：clawhub.club
Tray 系统托盘
创建原生应用菜单和上下文菜单。
Menu 菜单
添加图标和上下文菜单到系统通知区
dialog 对话框
显示用于打开和保存文件、警报等的本机系统对话框。
例子：在系统的右下角生成一个系统托盘。左键点击：进入系统主页面右键点击：弹出上下文菜单关于：弹出系统信息打开主窗口：进入系统主页面重启应用：重启应用退出：退出如图：
核心代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657function createTray () { const menubar = `${__static}/logo.ico` tray = new Tray(menubar) tray.on('right-click', () => { // 创建右键菜单 createContextMenu() ...
Electron-vue之Main进程开发-app与BrowserWindow
文章首发于：clawhub.club
Main进程一个显著的作用就是创建app的窗口，如图：看看代码中主进程都有啥：就两个文件，其中index.dev.js：里面写着说开发的时候debug使用
This file is used specifically and only for development. It installs electron-debug & vue-devtools. There shouldn’t be any need to modify this file, but it can be used to extend your development environment
另一个就是创建app窗口的文件了：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051'use strict'import { app, BrowserWindow} from 'el ...
Electron-vue之Main进程和Renderer进程简单介绍
文章首发于：clawhub.club
可以看到，主要有两个模块：Main进程管理的是这个app窗口（BrowserWindow），而Renderer进程负责的就是我们熟悉的页面UI渲染。下面抄一张图，表达了main进程与renderer进程可以使用的组件。他们有各自的模块，也有相互重叠的部分，通过remote模块，Renderer进程也能访问到比如dialog等模块，这是我以前就测试过的。
前端DB选型
文章首发于：clawhub.club
因为涉及到结构数据的存储，最开始想的是用SQLite3,但是折腾半天，好难集成，所以找了找electron-vue架子的issues:https://github.com/SimulatedGREG/electron-vue/issues?utf8=%E2%9C%93&q=sqlite,上面推荐了几个方案：
1，HTML5 Web SQL 数据库Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
看样例，感觉就是关系型数据库，不知道用起来怎么样。
2，浏览器数据库 IndexedDBIndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据， ...
win桌面软件开发技术选型
文章首发于：clawhub.club
最近要开发一款桌面应用，但是作为一个JAVA+半吊子Go开发人员，这一点有点难，幸好爱折腾，以前学过一丢丢VUE，也开发了一款小说阅读小程序，对前端也就知道这么一丢丢的东西。
所以找了半天，最后决定用vue开发，最后electron打包成win平台可执行程序。因为vue结合electron对我来说实在是太难了，所以我在github上找了个开源脚手架：https://github.com/SimulatedGREG/electron-vue
vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev
依着上面的步骤，跑出了页面。
但是我还不知道为啥上面获取到的信息，和我本地版本不一样，感觉是package-lock.json搞得鬼。项目中的：本地的：
但是目前构建成可执行文件还是失败的，摸索中。。。
electron+fs.copyFile 入坑
文章首发于：clawhub.club
想要实现文件复制功能，所以翻了一下nodejs的API文档，惊喜的发现，支持啊！！
fs.copyFile(src, dest[, flags], callback)新增于: v8.5.0文档内容如下：
src | | 要拷贝的源文件名。
dest | | 拷贝操作的目标文件名。
flags 用于拷贝操作的修饰符。默认值: 0。
callback
异步地将 src 拷贝到 dest。 默认情况下，如果 dest 已经存在，则覆盖它。 除了可能的异常，回调函数没有其他参数。 Node.js 不保证拷贝操作的原子性。 如果在打开目标文件用于写入后发生错误，则 Node.js 将尝试删除目标文件。
flags 是一个可选的整数，指定拷贝操作的行为。 可以创建由两个或更多个值按位或组成的掩码（比如 fs.constants.COPYFILE_EXCL | fs.constants.COPYFILE_FICLONE）。
fs.constants.COPYFILE_EXCL - 如果 dest 已存在，则拷贝操作将失败。
fs.c ...
electron+fs 多选文件 展示文件信息
文章首发于：clawhub.club
最近要做一个简单的桌面应用，需要操作文件，从网上找了一些例子，最后改改，测试测试。
进入页面：
选择文件：
展示文件：架子用了https://github.com/demopark/electron-api-demos-Zh_CN
前端代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<template> <div class="file-container"> <div class="file-selecter"> <!-- el-input --> <el-input placeholder="请选择文件,支持多选" v-model="fileSelected&qu ...
node.js-api-fs-path 简单使用
文章首发于：clawhub.club
fs（文件系统）node提供的fs包可以操作文件和文件夹,所有文件系统操作都具有同步和异步的形式。在繁忙的进程中，强烈建议使用这些调用的异步版本。 同步的版本将阻塞整个进程，直到它们完成（停止所有连接）。
获取模块1const fs = require('fs');
readdir给出一个目录filepath，可以在回调函数中获取到文件信息。
1fs.readdir(path[, options], callback)
回调有两个参数 (err, files)，其中 files 是目录中的文件名的数组（不包括 ‘.’ 和 ‘..’）
statSync 可以获取文件的状态信息，这是一个同步方法，有返回值.
1fs.statSync(path[, options])
返回: <fs.Stats>
stats.isFile()判断当前文件是不是个文件
path（路径）path 模块提供用于处理文件路径和目录路径的实用工具。
获取模块1const path = require('path')
...
