Vue.js コンポーネント設計 リファレンス

## Architecture
[Vue.js公式: スタイルガイド](https://jp.vuejs.org/v2/style-guide/)

[Vue.js で初めて SPA を開発する際に考えたこと](https://qiita.com/c-su/items/266552f444489f254e85)

- SFC推奨
- Vuejs Devtools推奨
- Vue Router推奨
- atomic design推奨
- Vuex推奨


[初めてVue.jsに触れた頃の私へ今の私が伝えたいTips コンポーネント分割/ライブラリ選択編](https://qiita.com/fruitriin/items/16b4542467e15ba82078)

- atomic design推奨
- propsdown eventup推奨
- Vue Router推奨
- 全てVuexは非推奨


[Vue.jsで開発を始める前に決めておきたい事](https://qiita.com/cawpea/items/c6cc6e2b9baaec1bca62)

- atomic design推奨
- page: storeに依存, components: storeに非依存
- propsの定義は詳細に
- CSSのclass名にコンポーネント名を含める
- storybook推奨
- 規模が大きくなればvuex推奨


[2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips](https://qiita.com/kahirokunn/items/6b4834b9a13406535f32)

- SFC推奨
- Vuex非推奨
- templateに不要なmethodは外出し
- data定義を減らす
- flagを極力減らす
- propsのrequired: rue推奨
- コンポーネントは細かく切る
- OSS推奨

### MVVM
[Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと](https://aloerina01.github.io/blog/2017-08-29-1)

- View: template?
- ViewModel: data, props, watch, computed, methods
- Model: Vuex
- Componentの分類: 完全/半自己完結型（props down, event up）/ループアイテム型
- ゲッターはVuexStoreの中身をfilterするために使う, 加工はあくまでVue側
- Vuex非推奨
- fluxにしたいならReactを使おうよ

[Vue.jsってどうやったら綺麗に使えるのよ](https://qiita.com/tsuuuuu_san/items/1bdd6a6b396a1169fc82)

- Vuexなしで、MVVMを意識してコンポーネントを分割


[2018年Vue.jsとVuexを使ってる人には知って欲しいFluxデザインパターンとViewModelとの組み合わせ](https://qiita.com/kahirokunn/items/f764302db290a504cc19)

![https___qiita-image-store.s3.amazonaws.com_0_141711_c1349b45-e6de-0229-22f2-2ca5f487cf22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192967/1c486d7f-49d9-dc24-c774-4885358d3abc.png)


[2018年Vue.jsとVuexを使ってる人に提案するコンポーネントの分類と設計パターン](https://qiita.com/kahirokunn/items/06366888409e73dfe70f)

[2019/07/26 Vueコンポーネントの分類とVuexの責務](https://github.com/manabuyasuda/til/issues/10)

### Presentational/Container Component Pattern
[Vue.js+VuexでContainer Componentパターン](https://log.pocka.io/posts/container-component-pattern-in-vuex/)

[フロントエンドのコンポーネント設計に立ち向かう](https://qiita.com/seya/items/8814e905693f00cdade2)

- atomic design推奨
- １コンポーネント１責任（機能もスタイルも）
- Redux,Vuexは要注意
- Presentational/Container Component推奨

[Vuex のルールと Component 設計](https://techblog.scouter.co.jp/entry/2019/02/14/154002)

- mapState非推奨, mapGetters推奨
- mapMutation非推奨, mapActions推奨
- 全てVuexは非推奨
- storeはドメインごとに
- Presentational/Container Component推奨

[VueコンポーネントのState管理を考える](https://user-first.ikyu.co.jp/entry/design-of-vue-and-vuex)

- propsdown eventup推奨
- ６つのモジュール結合度
- Presentational/Container Component推奨

[Vue使いなら知っておきたいVueのパターン・小技集](https://qiita.com/HayatoKamono/items/5958d8648007adf6881b)

- v-modelカスタマイズ
- render function
- functional wrapper component
- error boundary
- higher order component
- Presentational/Container Component
- renderless component (scoped slots)

### Atomic Design
未整理
[Vue.jsでAtomic Designを実践する](https://qiita.com/hareku/items/04705fcf92cc80ec4095)

[Vue.js × Atomic Design - コンポーネント分割の指針](https://speakerdeck.com/nrslib/vue-dot-js-and-atomic-design-guideline-for-components-division)

[Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話](https://qiita.com/HayatoKamono/items/72b02d439a83d68fc15a)

[Atomic Designってデザイナーには難しくない！？という話](https://qiita.com/rhirayamaaan/items/7f990e146ec01f2e7e08)

[Vue.jsとAtomic Designの勘所](https://qiita.com/nekobato/items/08bc7eabb1921871be50)

[Nuxt(Vuex)でAtomic Designを採用するときのメモ](http://tic40.hatenablog.com/entry/2018/10/09/080000)

[Atomic Designの日本語スライドに正しさを求めるのは間違っているだろうか](https://qiita.com/kahirokunn/items/e55dfddcd158f44a15d2)

[AtomicDesignをVue.js(Nuxt.js）に使うと最高な開発を体験できた](https://qiita.com/jakushin/items/e8b19f6a2c7bcd037573)

[Vue.jsとAtomicDesign](https://qiita.com/c6h4clch3_gh/items/9c0c028c9faf58caef2a)

[Vue.js からみた AtomicDesign](https://medium.com/@t_sugawara/vue-js-%E3%81%8B%E3%82%89%E3%81%BF%E3%81%9F-atomicdesign-e90517842801)

### おまけ
[vuejsのちょっと便利なコンポーネント機能](https://qiita.com/myLifeAsaDog/items/233f10591be8ff42cf1d)
[俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案](https://aloerina01.github.io/blog/2018-12-25-1#-override%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8Fmerge%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A0%E3%81%91)
[Vue.jsのmixinをslotで代用する](https://qiita.com/terrierscript/items/f051617522b20d57fd7b)
[Higher Order Components in Vue.js](https://medium.com/bethink-pl/higher-order-components-in-vue-js-a79951ac9176)
[Vue.jsで困った時に見るTips](https://www.maytry.net/vuejs-tips/)