Edited at

Vue.js+TypeScriptで開発するときの参考記事まとめ


概要

Vue.js+TypeScriptで開発する際によく参考にしている記事をまとめています。

自分用なので、自分記事が若干多めです。随時更新

この記事良かったよーとか、教えていただけると助かります。


環境構築

Vue CLIのプロジェクト管理UIがいい感じだった

https://qiita.com/kai_kou/items/8fcabc7a8445c1be8a30

DockerでVue.js+TypeScript開発環境を構築する

https://qiita.com/kai_kou/items/d581a9f8f3ee8605aed1

Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript開発環境をつくってみた

https://qiita.com/kai_kou/items/a404c73c8bb23f25c510

Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

https://qiita.com/potato4d/items/c9c0c8e674f20c85948a


設計

最近のフロントエンドのコンポーネント設計に立ち向かう

https://qiita.com/seya/items/8814e905693f00cdade2

Vue.js+AtomicDesign

https://speakerdeck.com/keitarookamura/vue-dot-js-plus-atomicdesign

Atomic Design を実案件に導入

https://ygoto3.com/posts/atomic-design-on-actual-project/

Atomic Design に学ぶ Web 開発をハッピーにするデザイン手法

https://qiita.com/usako/items/10ea7340f1a0b23a7b8b


単体テスト

Vue.jsの単体テスト実行が遅いのをなんとかしたい

https://qiita.com/kai_kou/items/43ea087efa060863b82a

Vue.js+TypeScriptのテストでRouterLinkがないって怒られたときの対応

https://qiita.com/kai_kou/items/9b78cfdd23cd686f676b

Vue.jsでコンポーネントを入れ子にするとUnit Testでワーニングがでて煩わしい

https://qiita.com/kai_kou/items/7463b516c5895c1dcdba

Vue.js+TypeScript+Element-UIの単体テストで気をつけること

https://qiita.com/kai_kou/items/42cea04989dec0c1725a

Vue.js Vueコンポーネントのユニットテストを書いてみよう

https://qiita.com/potato4d/items/8215941b84c11b845886

Vue.js+TypeScriptでElement-ui利用時に単体テストが完了しなくて悩んだ話

https://qiita.com/kai_kou/items/59cdda12f3f58d6e6a6f

Vue.js+Vuexで作成したカウンターアプリのユニットテストを作成する

https://qiita.com/kobayashi-m42/items/f5880217e6515d4e40b3


設定ファイル・環境変数

TypeScriptなVue.jsで環境ごとに設定ファイルを読み込みこめるようにしてみた

https://qiita.com/kai_kou/items/9a419f6e34476a2b9dba

環境変数とモード

https://cli.vuejs.org/guide/mode-and-env.html#modes


Vuex

VuexをTypeScriptで利用するのに悩んだ

https://qiita.com/kai_kou/items/fdd8ecd07995571da8a1

Vue.js + Vuex + TypeScript を試行錯誤してみた

https://logs.utahta.com/blog/2017/09/02/110000

Vue.js + Vuex + TypeScript Example

https://github.com/utahta/vue-vuex-typescript-example


コンポーネント

Vue.jsのコンポーネント入門

https://qiita.com/shosho/items/115b371736207078289c

TypeScriptではじめるVueコンポーネント(vue-class-component)

https://qiita.com/hako1912/items/8d9968d07748d20825f8

Vue.jsのpropsカスタムバリデーターを使った堅牢なコンポーネント作成

https://qiita.com/potato4d/items/1b92df0cbf9b0b6cf8d6

Vue.js+TypeScriptでコンポーネントをv-modelでつなげてみる

https://qiita.com/kai_kou/items/2584079da322b643d14d


API / モックサーバ

Vue.jsでVuex+axiosを利用してAPIを叩く

https://qiita.com/kai_kou/items/c4e449964df59d5a5fb0

API BlueprintとdrakovとdreddでAPIドキュメントを書きつつモックサーバを立ててさらにテストを走らせる

https://arata.hatenadiary.com/entry/2018/03/22/204723

api blueprintとdrakovを利用してAPIモックサーバを立ち上げる

https://qiita.com/kai_kou/items/bdbb6c3f8d1ac655595d


エラー処理

Vue.config.errorHandlerはどこで発生したエラーをキャプチャできるのか

https://qiita.com/clomie/items/73fa1e9f61e5b88826bc

Vue.jsでフロント側のエラー検知を共通化する

http://sms-c-engineer.hatenablog.com/entry/2018/04/24/142445

Vue.jsのerrorHandlerがいまいちつかめない

https://qiita.com/kai_kou/items/90255bdcfaa44f5d1de9


Tips

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips

https://qiita.com/k-okina/items/512b9e502f8db49981f3

「Vueコンサルが教えたくない7つの真実」を勉強してみた

https://qiita.com/shinobu_shiva/items/e0c458aa6c1e683a9881