🎈 この記事はWP専用です
https://wp.me/pc9NHC-S8
前置き
今回はパンくずリストを作成します🍞
すごくシンプルに、
コンポーネント作成のコツを
簡単に理解できるので
ぜひやってみてください✨💪
構成
アトミックデザイン
⬇️アトミックデザインや
分け方についてはこちら
他にもいくつか書いているので
ブログ内で検索してみてください🔍
パンくずリストはナビの役割なので
templatesに入れています🎈🧸
また、パンくずリストは
ヘッダーに入れたりするのが基本ですが、
今回は表示ができれば良いので
index.vueでimportしてもらえればOKです🙆♀️
file
components/
--| templates/
----| navs
------| NavBread.vue
pages/
--| index.vue
使用するもの
CSS
NavBread.vue
fontsize: 12px;
color: rgba(0, 134, 231, 0.8);
paddingは大体で良いです💡
⬇️横並びはFlexboxにしましょう！
【Nuxt.js】Nuxt実践編：Flexboxを使おう！
template
ABOUTページを開いている状態で、
TOPへのリンクをしてください🌟
また、画像はSVGを使用してみましょう！
できる方はSVGコンポーネントを作成しましょう🧙♀️
https://iconmonstr.com/arrow-25-svg/
Let's try!
まずは答えを見ずにやってみましょう♪
答え
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-S8