学んだこと②
仕事のタスクで学んだことをつらつら。。。
開発環境：Nuxt3, Vue3, TypeScript, scss
・scssの読み取りなどなど。
Nuxt /src/assets/stylesheets/global/helper.scss
（クラス名でflexをつける、margin, paddingをつける）
nuxt.cofigに以下を設定。
Nuxt /src/assets/stylesheets/global/variables.scss
（背景カラー、ボタンカラー、ボーダーカラーフォントサイズ、ブレイクポイント、ボタンの高さなど、汎用化したい※いちいち設定しないくていいもの）
※scss変数を使いたい場合は、nuxt.cofigに以下を設定。
vite: {
// 各Vueファイルに自動インポート
preprocessorOptions: {
scss: {
additionalData: '@import \'@/assets/stylesheets/global/
variables.scss\';',
},
},
},
},
例
:root {
// 背景色
--main-bg-color: #f4f4f4;
--white-bg-color: #fff;
}
コンポーネント別でも、CSSの読み取り（インポートできる。）
@import "@/assets/stylesheets/components/modal/modal";を各コンポーネントの<style></style>で読み込む。
・flex-grow: 1; はflexアイテムの数だけ平等に余白をふる。
flex-growは余白を分ける方法。
・flex-basis: 基本の幅の指定。
flex-basis: 0はflexアイテムは同じ幅にする。
・「vue-final-modal」ライブラリでモーダルが簡単にできる。
別途記事書きます。
・prposでは、ケバブケースは使えない。親コンポーネントで、ケバブで記載してても、キャメルケースの記載となる。
・関数()ありなしクエスチョン
結論：（）をつけないと実行されない。
イベントで関数を使いたい時は、イベントで発火なので、（）はつけない。つけるとイベント前に発火してしまう。
書きたいこと、色々溜まってきているな。
年末のお休みでいい感じに精査したいな。
かつ、もっと新しいことを学びたい。
