首页 / VUE / 配置|electron+vue+ts+sqlite的配置方法

配置|electron+vue+ts+sqlite的配置方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了配置|electron+vue+ts+sqlite的配置方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6730字，纯文字阅读大概需要10分钟。

内容图文

这篇文章主要介绍了关于配置|electron+vue+ts+sqlite的配置方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

从编程模型的角度来说，使用声明式语言声明样式和布局，使用功能完备的编程语言编写业务逻辑，算是GUI程序的一种最好的实践了。

最近要写一个个人项目，于是我自然想到使用前端来写界面。通过electron就能使用前端技术开发桌面端程序。它实际上就相当于内嵌了一个webkit浏览器核心，只是做了些裁剪和优化。

此外，前端框架使用我所熟悉的vue，无论是界面代码还是核心代码都采用typescript编写，它的静态类型系统很强大，综合了静态语言和动态语言的优点。

初始化配置

初始化vue和typescrpt

npm install --global @vue/cli
# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create idocumentation

勾选上typescript，其它的按需勾选。

Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? No # 是否使用class风格的组件定义
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files # 分离配置文件

这样，vue脚手架就自动帮你初始化好typescript + vue项目的结构了，可以进去看一看。

TSLint会对代码的格式和规范做检查，帮你规范格式，同时也会帮助你避免不好的习惯带来的bug。
不过默认的配置有点严格，这可以修改tslint.json来做到，下面是我的配置：

  "rules": {
    "quotemark": [false, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "eofline": false,
    "prefer-const": false,
    "no-console": false,
    "trailing-comma": false,
    "max-classes-per-file": false
  }

如果你觉得某个检查太严了，可以关掉，具体的字段参考这里： https://palantir.github.io/ts...

安装配置electron

首先安装：

npm install -g electron # 全局安装方式
npm install electron # 本地安装方式 推荐

然后编写electron主进程的入口代码，这里有个参考，将它放在项目根目录的main.js中：
https://github.com/electron/e...

注意到其中有一行：

mainWindow.loadFile('index.html')

这是electron启动时加载的前端页面文件，当然，也可以让electron改为从url加载，就像用浏览器打开一样：

mainWindow.loadURL('http://localhost:8080');

一般的工作流是，使用vue的开发服务器启动vue的开发服务器，vue开发服务器会监听在8080端口。
该服务器会监听文件系统事件，当修改了项目代码后，它会重新编译、打包。

所以，开发时，让electron从vue的开发服务器加载主页面，则开发起来更方便。

最后在package.json下加入：

"main": "main.js",
// ...
  "scripts": {
    "electron": "node node_modules/electron/cli.js ."
  },

其中，main字段指定项目的入口文件，也就是刚才编写的main.js。

scripts配置的含义是，当在终端运行 npm run electron时，会执行：

node node_modules/electron/cli.js .

这段代码会

调试

首先，在终端里执行：

npm run serve

它会启动vue的调试服务器，一般监听的是8080端口。不过，这个服务器比较智能，如果发现8080被占用会主动换端口。如果和electron搭配使用时调试的时候要注意这一点。

如果这个时候在浏览器打开http://127.0.0.1:8080也能正常访问，但是最好还是要在electron中调试。因为electron项目可能涉及到操作系统相关库的调用如fs，使用浏览器是不支持的。

其次，终端再开一个tab，执行：

npm run electron

如果一切顺利，electron的GUI就正常打开了！

打包配置

但是，上面的配置还有一些问题。我们来看vue项目的流程：

首先你编写的vue项目被vue的开发服务器检测到
开发服务器会将其编译、打包
electron访问vue开发服务器，拿到网页和代码，类似浏览器一样
网页和代码在electron环境里渲染、执行

那么，如果一个库要想正常使用，需要满足：

vue的开发服务器打包时需要将该库打包进来
electron环境中需要支持该库的运行

然而，默认的vue打包配置是针对浏览器的，不会也没有必要把操作系统相关的库给打包进来，如果这时直接调用fs等库，会出错。
解决方案是修改webpack的配置，编辑vue.config.js，内容为：

module.exports = {
    configureWebpack: {
        target: "electron-renderer"
    }
}

sqlite配置方案

electron项目中引入sqlite真的是一种折磨！啊啊啊啊！配置出了问题，代码都没法写，写了也没法运行。
搞了我一下午的时间，目前我还没有完全解决这个问题，如果谁有好的方案请告诉我，谢谢！

问题一

目前引入sqlite会遇到两个问题。
第一个问题则是sqlite由于是C编写的，安装时会遇上编译、链接的问题。
如果直接：

npm i --save sqlite

那么你引入sqlite包时，肯定会报错。因为electron无法调用sqlite的native二进制库。

问题二

即使你解决的了问题一，这还没完，还有一个更大的问题。

前面说过vue程序代码是需要被webpack编译、打包的，然而webpack打包并不能打包native模块，像sqlite这种的。

这里提到，这不是bug，这是feature：https://github.com/mapbox/nod...

可能的解决方案

方案一

是不行的！你还需要将sqlite的二进制库文件链接到electron的二进制文件上去，对的，就像你配置C或C++程序那样恐怖。好在有现成的工具，执行：

npm i --save-dev electron-rebuild
./node_modules/.bin/electron-rebuild

它会重新编译链接electron。至于能不能成功，看运气吧。
我在Windows下尝试了下，一会说需要python环境，一会网络链接又不行要下什么预编译包，总之事情很多。

后来在linux环境下尝试了，成功了。之后在electron的主进程里，也就是前面说的main.js入口文件中，尝试了下发现可以使用。

方案二

方案一解决了问题一。那么还有问题二没有解决。
我们梳理下现在手上的问题：

sqlite库能够在electron主进程运行。
sqlite库由于webapck的原因无法在渲染进程中运行。

那么，一种很自然而然的想法是，让实际的sqlite调用在主进程执行，渲染进程通过IPC方式和主进程通信。
如果把这种过程封装起来，即渲染进程中调用某个包装类来调用sqlite3，而包装类会将对应的调用信息通过IPC发送给主进程，主进程真正调用sqlite3模块来完成操作。
这种方式封装了就是远程过程调用（RMI）了，如果需求不高也可以不封装。

方案三

方案三则是用其它的替代思路了。有一个叫做sql.js的库，也能够操作sqlite。
这个库很有意思，它纯粹用js实现的。怎么做到的？性能能好吗？
准确的说不是js。这个库不是手写的代码，它是使用Emscripten将sqlite的C语言实现编译成asm.js。
而asm.js是一个js的严格子集，模型上和C更能对应上去，一旦js引擎发现运行的是asm.js，就跳过语法分析直接转为汇编语言。

但是它有几个缺点：

只能操作内存中的数据库，无法操作文件系统
性能和原生实现的sqlite相比，很显然，不高

如果在electorn中要拿它暂时用一用，则需要把数据库完全读入到内存中操作。处理不好，内存会爆炸的。

好在我这里需要用的sqlite只是存存元数据，几十k大小，还是能勉强用用到。先临时用这个顶上，封装一层，写后续的代码。前端和node发展很快，等以后有人弄出easy的解决方案了，再切换回sqlite模块。

方案四

方案四则是看看能不能改下项目的技术选型，要不换个其它的嵌入式数据库？

最后

electron的优点在于大大降低了开发成本，本身前端的方式开发界面就是一种良好的实践的，而前端蓬勃发展的今天又有大量的框架和组件库可供直接调用。
记得大学里写过GTK和Qt的图形界面，对比之下，传统的Qt写界面非常麻烦费事，而且也远远没有前端漂亮，动态性也差一大截。

不过electron的缺点在于打包后体积太大，而且运行性能不高。不过一般的场景中，这点缺点问题不大。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的配置|electron+vue+ts+sqlite的配置方法全部内容，希望文章能够帮你解决配置|electron+vue+ts+sqlite的配置方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285856.html

来源：【匿名】

【上一篇】自制vue组件通信插件之用mixin写插件【下一篇】php怎么返回数据给vue

更多 ►

【配置|electron+vue+ts+sqlite的配置方法】教程文章相关的互联网学习教程文章

vue中在data中引入图片的路径方法【代码】

错误的引入方式：export default {data () {return{imgUrl_homePage:‘@/assets/img/homePage_active.png‘}} }因为webpack是按字符号打包的，正确的引入方式： 1.import在外部引入import img_url from ‘@/assets/img/homePage_active.png‘ export default {data () {return{imgUrl_homePage:img_url}} }2.require内部引入export default {data () {return{imgUrl_homePage:require(‘@/assets/img/homePage_active.png‘）}} } ...

vue----webpack模板----组件复用解决方法【代码】

组件复用当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化　　比如：　　　　从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...

VUE开发中，数据变化后，修改了绑定对象的属性值后，页面dom没有发生变化，两种方法可以重新渲染$set和$forceUpdate【代码】【图】

最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数 handleAvatarSuccess(res, file) {this.$set(this.form,‘imgUrl‘,res.data); }, 方法2.$forceUpdatehandleAvatarSuccess(res, file) {this.form.imgUrl = res.data;this.$forceUpdate(); }, $set官方ap...

vue生命周期中常用的两个方法【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app"><son></son></div><template id="son"><div><h2>子组件</h2></div></template><script>new Vue({el: ‘#app‘,data: {},methods: {},components: {son: {template:‘#son‘,data...

Vue的watch和computed方法的使用【代码】

Vue的watch属性Vue的watch属性可以用来监听data属性中数据的变化<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.js"></script><script src="lib/vue-router-3.0.1.js"></script></head><body><div ><input type="text" v-model="firstname" /></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},watch:{firstname:funct...

Vue创建局部组件的方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...

Vue子组件调用父组件的方法【代码】

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div> </template> <script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}}; </script>子组件<template><div><button @click="childMethod()">点击</button></div> </template> <script>export default {methods: {childMetho...

vue项目中总结用到的方法。【代码】

依赖 vue-router获得当前字符串，对应当前路由的路径，总是解析为绝对路径。 computed: {productIcon () {return this.imgMap[this.$route.path]}} 跳转到指定页面使用router - link to:"/orderList" 可以，注意带/是定位到了根元素this.$router.push({path: ‘/orderList‘}) 原文：http://www.cnblogs.com/waitforyou/p/6790216.html

vue 中 ajax请求封装以及使用方法【代码】

async/await　　1）async/await场景　　这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。　　2）名词解释　　>async 　　 async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行， async 函数返回的是一个promise 对象。　　>await 　　await的含义为等待...

Vue父子组件传值以及父调子方法、子调父方法【代码】【图】

稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码： 1、父传值给子组件父组件：<template><div><p class="father">父组件</p><child :sid="id"></child></div> </template><script> import child from ‘./child‘ export default {components: {child},data() {return {id:‘0920‘, // 父组件向子组件传的值 }}, } </script>子组件：<template><div><p class="chil...

Vue Cli 打包之后静态资源路径不对的解决方法【代码】

cli2版本：　　将 config/index.js 里的 assetsPublicPath 的值改为 ‘./‘ 。build: {...assetsPublicPath: ‘./‘,... } cli3版本：　　在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）module.exports = {publicPath: ‘‘, // 相对于 HTML 页面（目录相同） } 参考链接：　1. vue打包静态资源路径不正确的解决办法　　　　　　2. Vue cli 3 build时怎么修改assets public path为相对路...

小程序中类似Vue的ref获取组件内部属性和方法

给子组件添加一个id属性，方便查找<view> <first-component id="mycomp"/></view>123通过this.selectComponent方法查找子组件Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log(this); // 获取子组件的数据 console.log(this.selectComponent("#mycomp").data); // 调用子组件的方法 this.selectComponent("#mycomp").huanghail...

使用vue-cli打包项目时候的一些体积优化方法【代码】

1.合理使用运行时依赖和开发依赖作为开发者，要合理区分哪些插件是项目上线运行后需要的，哪些是用于打包编译，压缩而运行时并不需要的，进行分类安装。开发依赖不会被打包进最终的项目文件，能大大减少项目文件大小。开发依赖在项目的package.json的devDependencies里，安装时使用的命令行：npm install xxx --save–dev //简写 npm i xxx -D运行时依赖在package.json的dependencies里，安装命令：npm install xxx --save //简写...

在vue项目中引用element-ui时让el-input 获取焦点的方法【代码】

// 注册一个全局自定义指令 `v-focus`Vue.directive(‘focus‘, function (el) {el.focus()})这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素所以我们要在<el-input>被绑定为v-focus的同时在自定义指令中获取组件下通过querySelector()方法获取input元素<el-input v-model.trim="searchFor" @blur="blurSearchFor"v-fo...

安装vue-cli最新版后，无法使用console方法的解决办法【代码】

新年后重装系统，重装vue-cli，运行项目，发现无法使用 console根据提示，原来是eslint禁了此函数的使用。解决办法：找到项目文件夹内的 package.json文件，打开，找到 "rules":{}修改为："rules": {"no-console": "off"},问题解决！原文：https://www.cnblogs.com/sx00xs/p/12158803.html

首页 / VUE / 配置|electron+vue+ts+sqlite的配置方法

配置|electron+vue+ts+sqlite的配置方法

内容导读

内容图文

初始化配置

初始化vue和typescrpt

安装配置electron

调试

打包配置

sqlite配置方案

问题一

问题二

可能的解决方案

方案一

方案二

方案三

方案四

最后

内容总结

内容备注

内容手机端

【配置|electron+vue+ts+sqlite的配置方法】教程文章相关的互联网学习教程文章

SQLITE - 相关标签

VUE - 相关标签

TR - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程