Vue3 + Electron + TailwindCSSセットアップTips
0YuVue3+TailwindCSS
に従ってvue3プロジェクトにTailwindCSSを導入しビルドを行うと、下記のエラーとなる。
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users:
によると、
v2.0の時点で、TailwindCSSはPostCSS8に依存しており、PostCSS8はリリース間もないため、エコシステム内の他の多くのツールが非対応となっている。つまり、Tailwindのインストール後にターミナルでこのようなエラーが表示される場合があるとのこと。
そのためtailwindcss、postcssk、autoprefixerをアンインストールし、互換ビルドのインストールを行うことで無事にビルド可能となった。
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
0YuElectron
ファイルダイアログを出すためのdialog module をレンダリングプロセス側から使うにはremote moduleを介する必要があるが、remote moduleはElectron 10.0.0からデフォルトで無効化されたため使えない
参考
10/6追記
そのため、デフォルトでFalseとなっているnodeIntegration(nodeモジュール用)とenableRemoteModule(remoteモジュール用)をそれぞれTrueに設定する必要がある。
参考
remoteモジュールはElectron v14からは抹消されてしまっている。
0YuGUI
- 前準備
Xサーバーの導入
export DISPLAY=XXX.XXX.XX.XX:0.0
ここで下記のエラーが発生
“error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory” Code Answer’s
ライブラリが足りないと言われているので、足りないものをインストール
sudo apt-get install libaio-dev
TailwindCSSドキュメント(参照用)
フォント ギャップ bgカラー Screen height
Using a plugin
You can also add base styles by writing a plugin and using the addBase function:
0Yumarkdown Editor
0Yuアプリケーションをビルドする
electron-builderを使ってビルドする場合
electron-builderをインストール
$ vue add electron-builder
dist_electronディレクトリ内に実行ファイルを生成する
With Yarn:
$ yarn electron:build
or with NPM:
$ npm run electron:build
windows用にパッケージングするには以下のオプションでビルドする
$ yarn electron:build --win
Electron Packagerを使ってビルドする場合
windows/mackOS向けにビルドする場合
package.jsonを下記のように書き換える
{
"scripts": {
// ...
+ "package": "electron-packager . electronTextEditor --platform=win32 --arch=x64 --electron-version=6.0.11"
},
- "main": "background.js",
+ "main": "main.ts",
// ...
}
参考
0YuTailwindCSSでGoogleフォント(Inter)をつかう
基本的には下記の手順に従う。
Add src/assets/main.css to src/main.jsする
// src/assets/main.css
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
// ...
に従い、
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
...
'body': ['"Inter"', ...],
}
}
}
とすると、font-bodyというクラスが生成される。その後、下記のように指定することで利用可能となる。
<body class="font-body">
参考
0Yuレイアウト参考
0YuElectronリーディングリスト
Vue3
0YuGitHubショートカットライブラリ
$ yarn add @github/hotkey
Usage(Vue3)
import { install } from "@github/hotkey";
export default {
mounted: function() {
for (const el of document.querySelectorAll("[data-hotkey]")) {
install(el);
}
},
};
<button
@click="open"
data-hotkey="Control o"
class="font-body shadow-md inline-flex items-center justify-center px-5 py-3 border border-transparent text-base rounded-md text-white bg-green-500 hover:bg-green-600"
>
file open
</button>
mainビューの変更を自動保存する
0YuVue.jsでGoogle API(gapi)を使う
Composition APIをインストール
yarn add @vue/composition-api
を参考にセットアップを行う
gapiをインストール
yarn add gapi
Composition APIについて
0YuTS + GoogleAPI(gapi)の導入
JavaScript Quickstart
Google APIはnode moduleで提供されていない(※index.htmlのヘッダーにscriptタグで取り込む必要がある)ので、onMountedから動的にDOMに挿入する
onMounted(() => {
const script = document.createElement('script')
script.src = 'https://apis.google.com/js/api.js'
// scriptタグを動的にDOMに挿入する
document.head.appendChild(script);
});
TypeScript Support
- TSにgapiの型を認識させる
import { defineComponent, onMounted } from "vue";
/// <reference path="../../node_modules/@types/gapi/index.d.ts" />
// eslint-disable-next-line @typescript-eslint/no-namespace
declare const gapi: any;
下記の3つのモジュールをnpm(yarn)で入れる
tsconfig.jsonを書き換える
"compilerOptions": {
"types": [..., "gapi", "gapi.auth2", "gapi.calendar"],
}
参考
0Yumemo Grid Template Columns vue router コンポーネント分割
0YuGAPIリファレンス
0YuCopotisin API Column
0YuElectron
0Yuロゴメーカー
フリーアイコン
0YuIPC通信についてまとめたもの
0Yuビルドについて
Vue CLI Plugin Electron Builder を使う
MacOSからビルドする
MacからWindows向けにビルドを行う際にはhomebrew-wineをここ からインストールし、
--win --x64 オプションをつけてビルドする
dmgファイルの生成でビルドエラーになった場合
⨯ Exit code: ENOENT. spawn /usr/bin/python ENOENT failedTask=build stackTrace=Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT
export PTYON_PATH= でローカルのptyhon2を環境変数にセットすると、上記エラーを回避できる
ローカルのpython2のパスはwhich python2 で検索する
追記
electron-builder@23.0.2 を使う