公司开发的产品都是用c++写的,而且还都是几个人,老板想搞下创新,就是看看能否通过其它的方式来实现前后端分离.然后我就了解到了electron这个东西,之前学安卓的时候看到过flutter,不经意间看到了electron,但是没有仔细看,就知道是写工具的.所以最近突然想起来这个东西可以搞一搞.所以我打算以后经常分享一些自己学到的东西给大家.多的不说,上菜. 1.首先创建一个electron+vue的项目(开发工具 Vs Code),用vs打开打开之后的样子. 2.在渲染进程中创建一个js(Men

// 测试 正常跳转应该登录成功 // that.timer = setInterval(() => { that.$router.push('/mainChat');//路由跳转mainChat const remote = require('electron').remote; const BrowserWindow = remote.BrowserWindow; //改变窗口大小 BrowserWindow.mainWindow.setSize(common.WINDOW_SIZE_MAI

在看张鑫旭博客得时候看到了electron这个东西,来了兴趣,就按照上面写的将已经做好得vue项目拿来试了试,出乎意料得顺利 electron简单说下electron,就是把 chrome内核和你的项目文件打包成一个程序,和移动端得混合应用有点类似.当然实现起来肯定没有说得这么简单得. 那么怎么做呢? 首先,你电脑上面要有git 和 node ,git可以不要,不过最好安装了,Node必须要. 第二步  使用git clone  https://github.com/electron/elect

1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var template = [ { label: '关闭', click: function () { win.close();console.log("关闭")}, // submenu: [ // { // label: 'Undo', // accelerator: 'CmdOrCtrl+Z'

之前一直使用C#编写桌面应用,也顺带写一些Web端应用.最近在看node时发现常用的vscode是用electron编写的,一种想吃螃蟹的念头就涌了上来. 在网上找了找electron的资料,也研究了一下官方文档,发现electron app其实就是一个chrome浏览器,UI全部都是使用web端技术编写的,因为之前一直使用Vue来写Web应用,所以自然就想到Vue+Electron的组合. 在网上找了找,居然有现成的轮子Electron-Vue,立即install使用,可是发现最后却不那么如人

路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.push({name: course}); //这个name是router.js里面设置的name this.$router.go(-1); //页面后退 this.$router.go(1); //前进 <router-link to="/course">课程页</route

一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目打包好后打开index.html能显示网页.因为刚接触便直接拿官方demo进行打包了. 1.克隆官方demo:git clone https://github.com/electron/electron-quick-start 2.cd electron-quick-start->npm insta

一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式) src 下创建一个css 作为全局的样式 设置 最后将设置好的全局样式 在mian.js 文件中 导入 作为 项目的入口 类似执行文件(start.py) 基础的完成了 二.路由传参的几种方法 2.1 导航栏的显示设置 <template> <div c

---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果缺失node_modules节点模块,启动项目会如下报错: 再次安装刷新即可,系统会自动加载node-modules文件内容 新项目模板的创建,接下来就是修改main.js路由等配置 设置全局的css样式,新建一个global.css,存放在assets文件夹下面. 把vue项目框架自带的home.

前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目前是2个子应用一个 Vue 一个 React.路由方案是 Vue Router,React Router + history. 有交互场景是从 Vue 子应用跳转到 React 子应用,或者从 React 子应用跳转到 Vue 子应用,因此遇到了问题. 遇到的问题 结合项目诉求和遇到的问题,大家可以

使用 electron 做个播放器 本文同步更新在:https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了,但是最近才玩了一下,写篇博文记录一下,以便日后回顾. electron 的入门可以说是相当简单,官方提供了一个 quick start,很流畅的就可以跑起来一个应用.因此,如何入门就不赘述了,直接说一下如何做个播放器. 为啥要做个播放器呢,因为我在很久很久以前写过一个网页版的音频可视化播放器,但是因为是在页端,所以

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

1.Windows隐藏方法 const {electron,Menu,debug} = require('electron'); Menu.setApplicationMenu(null) 2.macOs的菜单隐藏方法 app.dock.hide();到目前为止 只发现这一种处理方式 it's an os x only method (documentation)

添加应用 首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow = null; app.on('window-all-closed', () => { if (process.platform !== 'darwin')

v-on绑定事件监听器 直接撸代码: <div id="app"> <h2>计数器</h2> number:{{number}} <button v-on:click="add">+</button> <button @click="subtract">-</button> </div> <script src="https://cdn

vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuejs.org/v2/guide/                 vue 官网,超好资料教程 最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过 blog 分享给更多人. 首先,我会先简单介绍一下 vue 和 webpack:

Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在前面,我们一直使用的是{{}}的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式: v-text:更新元素的innerText v-html:更新元素的innerHTML v-once:静态插值 v-pre:原格式输出 v-cloak:指令保持在元素上直到关联实例结束编译 <!DOCTYPE htm

源码查看: React 版的TodoList=> 点击跳转 Vue 版的TodoList=> 点击跳转 用React实现的思路: React使用注重的思想是少用state,纯函数实现功能思想. 用React实现的todolist中,双向绑定数据功能需要自实现,通过对 <input/> 的value与 <li/>中的数据进行绑定,从而实现添加显示. 难点: 对state的使用,注意引用值的问题.解决办法在README.md文档中已经指出 用Vue实现的思路: 在Vue中,

1. 数据渲染 vue是使用template模板进行渲染,react使用的是jsx语法,对组件进行渲染 vue模板中使用{{ this.data }} 双括号包着变量,代表变量表示的值.外面那层表示需要通过js进行解析,里面那层表示一个对象,即变量是通过对象形式定义的.  <h1>site : {{site}}</h1> 接下来我们看看如何定义数据对象. data 用于定义属性,实例中有三个属性分别为:site.url.alexa. methods 用于定义的函数,可以通过 ret

这篇博客将通过一个实例来对vue构建项目的过程有一个了解. 主要用到的知识点如下所示: vue-router 2.0路由配置 router-view 和 router-link的使用 transition控制页面的跳转 .vue后缀的单文件组件 调整目录结构 我们先用vue-cli构建项目,然后将 src 目录下的APP.vue删除,然后添加一个pages文件夹,这个文件夹的目的在于存放页面, 页面也是组件,但是在components下的不是一个完整的页面,而pages下的组件是一个页面组件.这

一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插值会发生变化:但是当插值发生变化并不会影响数据对象的值.其中:v-text可以简写为{{}},并且支持逻辑运算. 实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="