vue-electronコンポーネント間で共有Javascriptコードをロード

Question

vue init simulatedgreg/electron-vue <my project name>を使用して新しいvue-electronプロジェクトを作成しました。私は輸入そのコンポーネントとそれがSQLiteデータベースからのタグのリストを引っ張って、正しくレンダリングすることTagger.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> 

：私はそうのようなデータベースバックエンドを使用して、いくつかの基本的なコンポーネント（src/rendered/components/Tagger/TagList.vue）を作成することができます。

私は複数のコンポーネントで使用できるように、データベースコードを抽象化したいと思います。私はdatabase.jsを作成しました。私はsrcとsrc/mainに置く試み、var db = requrie('database')とvar db = require('src/main/database')や他のいくつかのバリエーションを使用して、それをインポートしようとしました

"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(); 
    } 
} 

が、私はいつもモジュールが見つからないというエラーが表示されます。それはこのようになります。 vue-electronプロジェクトでモジュールをビルドしてインポートする正しい方法は何ですか？

Answer 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 

その後、私はその<script>セクションに次のように持っているsrc/renderer/components/Tagger.vueのコンポーネントがあります。

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

そして最後に、私はので、私は私をコンパイルすることができ.electron-vue/webpack.renderer.config.jsに次を追加しましたcoffeescript：

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