Vue + Typescript + Element + fuseboxの開発環境構築

更新

2018/12/02

この記事を書いたあといろいろ試しましたが、Nuxtがオススメです。
超絶かんたんにセットアップできます。
Server side renderingが超絶簡単にできるので、SEOにも有利です。

概要

以下のライブラリを使って、フロントエンドUI開発環境を整えてみました。結論だけ知りたい方はサンプルアプリを見てください。この記事には、この構成にいたった経緯やハマりポイントを書きます。

• fusebox
  • webpackのようなもの。typescriptとの相性が良く、webpackより速い。
• vue
  • Javascriptフレームワーク
• Element
  • vueのコンポーネント集
• typescript

サンプルアプリ: https://github.com/contribu/element-ui-sample

経緯やハマりポイント

スピード重視でfuseboxを選んだ

Webpackとfuseboxどちらが良いのか？ソースコード更新後ビルドが終わるまでに、Webpackは数十秒かかります。一方でfuseboxは数十msで終わります。Webpackは.vue内で<style>が使えますが、cssは.vueで管理しないほうが保守性が良い気がしたので、そこはメリットとして弱いと判断しました。webpackはソースコードを更新すると、ブラウザのリロードまで自動でやってくれますが、そもそもビルドに数十秒かかると意味が無いです。結論、スピード重視でfuseboxにしました。

	速度	.vue内で<style>を使えるか？	ホットリロード
Webpack	数十秒	使える	ブラウザ自動リロード
fusebox (採用)	数十ms	使えない	ブラウザ手動リロード

Vue.use(ElementUI)が動かない

以下の修正で解決しました。治る理由は良く分かっていないです。

• https://github.com/contribu/element-ui-sample/blob/965023ec3faeb9bf1a5ca7e56b5bf0eeb5f87b42/src/index.ts#L3-L66
• https://github.com/contribu/element-ui-sample/blob/965023ec3faeb9bf1a5ca7e56b5bf0eeb5f87b42/src/index.ts#L72-L139

参考リンク

• http://element.eleme.io/#/en-US/component/quickstart#on-demand

element-uiのテーマや.scssがロードされない

この修正で解決しました。治る理由は良く分かっていないです。

vagrant経由だとfuse.watch()が効かない

この修正で解決しました。

fuse.run({
    chokidar: {
        usePolling: true,
    },
});

参考リンク

• fuseboxのchokidarオプション: http://fuse-box.org/page/development#chokidar-options
• chokidarのusePollingオプション: https://github.com/paulmillr/chokidar#performance

vagrant経由だとnpm installが失敗する

こちらで解決しました -> https://medium.com/@dtinth/isolating-node-modules-in-vagrant-9e646067b36

cd /path/to/element-ui-sample
mkdir ~/element-ui-sample_node_modules # synced_folderの外
mkdir ./node_modules # synced_folderの中
sudo mount --bind ~/element-ui-sample_node_modules /path/to/element-ui-sample/node_modules