Question

我使用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项目中构建和导入模块的正确方法是什么？

Answer 1

我最终决定将我的数据库库放在树的// Create an array of integers ranging from `min` to `max` (both inclusive). function range( min, max ){ return Array(max - min + 1).fill().map(function(_, i){ return i + min; }); } // Shuffle an array in place and return it. function shuffle( a ) { var j, x, i; for (i = a.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = a[i]; a[i] = a[j]; a[j] = x; } return a; } // Create wanted range of integers, shuffle and return it. function generateShuffledArray( min, max ){ return shuffle(range(min, max)); } console.log( generateShuffledArray(0, 9) )部分。我的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') ... ...，以便我可以编译我的coffeescript：

.electron-vue/webpack.renderer.config.js

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

1 个答案: