開発

Vue+Vuetify+Vuex+Fuse-boxで開発環境を構築

タイトル通りなのですがVue関連は特に罠はない感じです。fuse-boxが少しハマりました。メモとして残しておきます。

fuse-boxのインストール

執筆時点ではfuse-box 3.7.1が最新版でした。公式では前提条件として node.js 8.2+ となっているのですが標準プラグインがES2018で記述されているぽく(object rest/spread properties関連と思われる)node.js 8.2 では動きませんでした。実際はES2018 をサポートしている node.js 8.6以上が必要です。

あとは通常のインストールで問題ないです。

yarn init

yarn add fuse-box typescript terser uglify-js --dev

yarn add vue-template-compiler vue-template-es2015-compiler vue-hot-reload-api postcss-selector-parser --dev

yarn add vue

yarn add vuetify

yarn add vuex

fuse.js設定

最初はスクラッチから作っていたのですがドキュメントを読み込んでいると時間がかかりました。ですのでベースとしてfuse-box-vue-seed のfuse.jsを元に設定していくと良いと思います。

Sassを使っていなかったのですがそのままコピーして動かすとパッケージが足りない、など引っかかるので不要なプラグインは使わないように編集したり、require(“fuse-box/es6”);とes6にしたりが主な編集ポイントでした。

Sparkyは好みですね。キャッシュや不要ファイルの削除は便利そうです。

TypeScriptの設定

fuse.jsでhomedirに指定した場所にtsconfig.jsonが作成されます。オプションの設定が必要であれば指定しましょう。

terser-plugin

本家ドキュメントではリンク切れになっていますのでterser-pluginへのリンクを張っておきます。設定は特にしないでも動くと思います。uglify-jsを使うかどうか自動判断されます。

管理人

Recent Posts

CanvaがSerif (Affinity) を買収

私は使ったことがないのですが名前はよく聞…

4週間 ago

Serifのスプリングセール – アドオンが50%オフ

Affinity Photoなどレタッチ…

2か月 ago

音声がロボットのようになるときの対処

リモート会議などでたまに相手の音声がおか…

3か月 ago

Serifのブラックフライデー – 全品40%オフ V1ユーザは更にお得!

恒例のブラックフライデーセールが始まりま…

5か月 ago

[rust] rayonで書き直してみました

前回のコードを元にrayonを使った処理…

5か月 ago

[rust] async-stdで書き直してみました

前回のコードをasync-stdで書き直…

6か月 ago