Vue.jsで構築したデスクトップアプリでSQLite3を使うための手順をまとめます。Builderをプラグインとして追加した状態での手順になります。他のelectron-vueなどを使用して構築した場合やその他の条件下で試していませんが、何か参考になれば幸いです。Vue.jsアプリの構築手順については以下に載せているので必要な方は見てみてください。Electron+Vue.jsを使ったデスクトップアプリ開発を始める手順ElectronはWebアプリケーションの開発に使われるJavascriptやHTML、CSSなどの技術を用いてデスクトップアプリを開発できるフレームワークです。OS、Linux)のデスクトップアプリを開発することができます。この記事では、Ubuntu上でElectronとさらにVue.jsを用いたデスクトップアプリ開発をはじめるために必要なツールのインストール手順と、実際にデモアプリを起動させるまでをまとめます。以下の記事を参考にさせて頂きました。ありがとうございます。restrictions.www.techiediaries.comSQLite3をインストールしてElectron用にリビルドするElectronでは、Node.jsのネイティブモジュール(Node.jsのためのモジュール)をサポートしていますが、Electron向けにリビルド(再コンパイル)する必要があります。リビルドしないとモジュールが使用するNode.jsのバージョンが異なりエラーが出る場合があります。詳しくは以下の公式ドキュメントに記載されています。向けに再コンパイルする必要があります。しなければ、以下の類のエラーが実行しようとしたときに発生します。electronjs.orgSQLite3もnpmでインストールした後にリビルドします。リビルドにはelectron-rebuildを使用します。よってまずelectron-rebuildを以下でインストールします。electron-rebuild--save-devオプションは、package.jsonにバージョン情報を書き込みますが、開発時にのみ利用するオプションとそして記録されます。package.jsonのdevDependenciesにバージョン情報が書き込まれます。続いてSQLite3を以下でインストールします。--saveそして以下のようにelectron-rebuildを使用してSQLite3をElectron用にリビルドします。Vue.jsアプリのルートディレクトリにいる前提です。sqlite3-fは強制的にリビルドするためのオプションで、-wは特定のモジュールを指定するためのオプションです。-wの後にモジュール名を続けてリビルドするモジュールを指定します。-mの後にディレクトリパスを指定することでそのパス下のモジュールをリビルドすることも可能です。リビルドには少々時間がかかり、以下のように表示されれば完了です。Completeelectron-rebuildの他のオプションについては以下の公式ドキュメントに記載されています。versiongithub.com以上でSQLite3のインストールとリビルドは完了です。Vue.jsアプリでSQLite3を使用するあとはメインプロセス、レンダラープロセスの任意の部分でデータベースに接続してデータベースを操作できます。Vue.jsアプリのルートディレクトリにtestfile.dbというデータベースファイルが作成されます。あとは以下はのように適当なメソッドに結びつけたボタンを用意して、そのボタンをクリックしたらデータをデータベースに書き込むことももちろんできます。後はクエリを変更すれば自由自在にSQLiteのデータベースを操作可能です。実際にはフォームから受け取った値などを渡す。}}</script>なお、データベースを閉じるためにはdb.close()を使用します。忘れにずに閉じるようにしましょう。その他のSQLite3の使い方については、以下の公式ドキュメントに記載されています。Vue.jsアプリでSQLite3を使うまでに必要な手順は思ったより少なかったです。シンプルな処理のみの場合はこの記事の内容のように直接クエリを書いて対応できるかもしれませんが、実際にはORMなどを使う必要が多いかもしれません。使う機会があればまとめたいと思います。Nuxt.jsでBuefyを使っており、csvファイルをアップロードして読み込ませる必要がったので実装してみました。この記事では、Buefyというコンポーネントセットを使っています。Nuxt.jsでフォームのバリデーションをするためにVeeValidateを使ったので設定手順と簡単な使い方をまとめます。Nuxt.jsでBuefyを使っており、部分的にスタイルをカスタマイズしたい場面がありました。この記事では、Nuxt.jsで使っているBuefyのスタイルをカスタマイズする方法をまとめます。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。