在 vue-electron 组件之间加载共享的 Javascript 代码

Posted 2023-02-23

【中文标题】在 vue-electron 组件之间加载共享的 Javascript 代码

【英文标题】：Loading shared Javascript code between vue-electron components

【发布时间】：2018-05-20 17:58:29

【问题描述】：

我使用vue init simulatedgreg/electron-vue <my project name> 创建了一个新的 vue-electron 项目。我可以创建一些使用数据库后端的基本组件（src/rendered/components/Tagger/TagList.vue）：

<template>
  <ul>
    <li v-for="tag in tags">
      <input type="checkbox" :id="tag" :value="tag" v-model="selectedTags">
      <label :for="tag"> tag </label>
    </li>
  </ul>
</template>

<script>
export default 
  data () 

    var db, sqlite3, tags;
    sqlite3 = require('sqlite3');
    db = new sqlite3.Database('/tmp/tagister.tmp.sqlite3');
    tags = [];
    db.each("SELECT id,tag FROM tags", function(err, row) 
      tags.push(row.tag)
    );
    db.close;

    return 
      tags: tags,
      selectedTags: ['someTag']
    
  

</script>

<style>
</style>

我有一个 Tagger.vue 导入该组件并正确呈现，从 sqlite 数据库中提取标签列表。

现在我想抽象数据库代码，以便可以将它与多个组件一起使用。我创建了一个database.js。它看起来像这样：

"use strict";

sqlite3 = require('sqlite3')

export default class Database 
  constructor(dbFile) 
    this.db = new sqlite3.Database(dbFile);
    log.console('Opened Database: ' + dbFile)
  

  tags() 
    var tags = [];
    this.db.each("SELECT id,tag FROM tags", function(err, row) 
      tags.push(row.tag)
    );
    return tags;
  

  files() 
    var files = [];
    this.db.each("SELECT id,name FROM files", function(err, row) 
      files.push(row.name)
    );
    return files;
  

  close() 
    this.db.close();
  

我尝试将它放在src 和src/main 中，并尝试使用var db = requrie('database') 和var db = require('src/main/database') 以及其他几个变体导入它，但我总是收到找不到模块的错误。在 vue-electron 项目中构建和导入模块的正确方法是什么？

【参考方案1】：

我最终决定将我的数据库库放在树的src/render 部分。我的src/renderer/database.coffee 如下所示：

Database = require('better-sqlite3')

class TagDB

  constructor: (dbFile) ->
    @db = new Database(dbFile)
    console.log("Opened Database #dbFile")

  tags: ->
    @db.prepare("SELECT id,tag FROM tags").all().map( (row) => row.tag )

  files: ->
    @db.prepare("SELECT id,name FROM files").all()

  close: ->
    @db.close()

export default TagDB

然后我在src/renderer/components/Tagger.vue 有一个组件，它的<script> 部分有以下内容：

<script>
  import TagDB from '../database'
  var tagdb = new TagDB('/tmp/tagster.tmp.sqlite3')
  ...
  ...

最后我在.electron-vue/webpack.renderer.config.js 中添加了以下内容，这样我就可以编译我的咖啡脚本了：

  module: 
    rules: [
      
        test:  /\.coffee$/,
        use: 'coffeescript-loader'
      ,
  ...
  ...
  extensions: ['.js', '.vue', '.json', '.css', '.node', '.coffee']