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

ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style> js文件的引入 在main.js中: import API from './assets/api/api.config.js' Vue.prototype.$API = API; P.S.:传

electron可以结合前端的很多框架来进行快速的开发.在这里只讲一种electron结合vue并且使用前端的elementui来快速搭建一个项目页面. 第一步.创建electron 以管理员身份运行cmd,想好要把项目存放的位置,并cd进去(我一般关于项目的任何东西都不会用中文,代码注释除外). 在cmd中运行:   vue init simulatedgreg/electron-vue eleproject01    (1)eleproject01是项目的名字(不能有大写字母) (2)sas

文章目录 问题 简化步骤 问题 // main.js import Antd from "ant-design-vue"; import "ant-design-vue/dist/antd.less"; // 后缀改为less 支持自定义主题 Vue.use(Antd); 完整导入第三方UI组件库是导致app.js文件过大 通过按需加载的方式 // main.js import Button from "ant-design-vue/lib/button&

webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path = require('path'); let webpack = require('webpack'); /* html-webpack-plugin插件,webpack中生成HTML的插件, 具体可以去这里查看https://www.npmjs.com/package/html-webpack-p

[1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl: 'https://xxxxxx', pmsApiPort: ' } // 配置测试环境下服务器地址 window.Glot = { pmsApiUrl: 'https://xxxxxx', pmsApiPort: ' } // 配置生产环境下服务器地址 window.Glop = { pmsAp

Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Electron封装. 一.创建Vue项目 + Electron封装 1.创建Vue项目 通过 Vue脚手架工具 vue-cli 创建Vue项目:vue init webpack xxxxxx (注:项目名称中不能出现大写字母) vue init webpack electron-vue 等待Vue项目初

上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒.(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引

一.环境介绍及会遇到的困难 electron是一款比较流行的桌面可视化开发工具,通过html+js+css实现桌面应用,优点就是多平台开发以及UI好看.缺点是外网npm仓库速度慢.话不多说开始我的教程,和可能遇到的坑的解决办法. 二.全局配置npm以及需要的包 安装的过程要是出现报错可以试试 cnpm update,更新npm 1.npm地址配置 1 #切换npm源为淘宝地址 2 npm config set registry https://registry.npm.taobao.org/ 3

1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件库 开发平台OS:windows 开发平台IDE:vs code 构建项目模板由创建项目.改造项目.自定义标题栏.打包项目等几个篇章组成,最终产出物是将electron.vue.element三者结合起来,构建出来的一款现代化的桌面应用程序模板.在构建项目之前需具备nodejs.vue-cli环境基

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'

electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 快速开始electron 直接运行github上关于electron的构建工具 git clone https://github.com/electron/electron-quick-start cd

用户登录后,选择子节点,节点中含有多个菜单,可以根据后台返回的权限数据进行权限控制 在vue上挂载自定义指令方法,根据后台返回权限移除相应节点 import Cookies from "js-cookie"; const hasPermission = { install(Vue, options) { // let shishi = Cookies.get("shishi"); Vue.directive('has', { bind(el, binding, vn

摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJs及其衍生技术高速发展的同时,Nw和Electron的问世,更是为前端发展提速不少,依稀记得哪位前辈说过,“能用Js改写的,终将用Js改写”,这不,客户端来了!使用Electron也有一段时间了,各种简单复杂的问题,也都或多或少的遇见过,下决心整理出一套客户端模板出来,一是加深一下自己的理解,二是供

摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着学习的态度,去介绍.总结一些常用到的配置及思路,有不恰当的地方,或者待优化的地方,欢迎留言.项目完整代码:https://github.com/luohao8023/electron-vue-template 下面开始~~~ 一.安装依赖 vue.webpack:不多说了 vue-loader:解析

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:到目前为止,我们的项目已经具备了PC客户端该有的一些基础功能和调试环境,但是总感觉缺了灵魂,那就是结合实际项目.实际业务的细节处理,缺着吧...这篇文章就介绍一下预加载和自动更新,文字功底有限,如有介绍的不清楚的地方,欢迎留言

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web) 摘要:整个项目就剩最后一哆嗦了,但仅仅是当作demo模版来说,实际项目的话,还有很多需要细化的地方.项目完整代码:https://github.com/luohao8023/electron-vue-template,随博客更新. 一.打包客户

electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可 mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏 然后我们开始制作自己的标题栏创建Mytitle组件

vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, index) in navList" :key="index" v-text="item.name" :class="{ 'active-color': index === currentIndex }" @click="navigat