Nuxtのディレクトリ構造、nuxt.config.js、SSLについて
備忘録のようなメモ。
前提
@ は、ソースのルートディレクトリを指す。
参考
最初の最初で私がハンズオンとして参考にした動画は
ディレクトリ構造
@
├ assets：静的ファイルの場所。画像ファイルとかもここなのか？いや、このご時世s3などがデフォなのかもしれない。
├ components：ページとは違い、ページの中の一部品をコンポーネントとしてここに入れていく。
├ layouts：レイアウトというだけあって、全ファイルの共通な部分を設定していく。
├ middleware：サーバサイドのフレームワークを触ったことがある人ならわかるかもしれないが、要は、各ページに移動する前に何かしらの処理（見せていい・悪い）を設定するところ。ログインした人の認可など。
├ pages：ここにページを入れていく。ルーティングも兼ねているため便利。
├ plugins：全ページで共通の関数などの定義と言う認識。使い方のリンクは↓ qiita.com
├ static：前述のassetsとの違いは今の所未把握。ただ、デフォルトでfaviconが入っていることを考えるとこちらがデフォなのかもしれない。
└ store：状態を保持するためのjsファイル置き場。それこそ、今ログインしているか否か、などである。
SSLについて
内容
今回AdminLTE3を用いるに当たって
npm i admin-lte@^3.0 --save
からが長かった。
まず、nuxt.config.js のcss プロパティにheadに入れるcssを設定していくんだ。
最初はどこに入れりゃ良いのかもわからんな。
css: [
'@/assets/css/main.scss',
// AdminLTE
'@/node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css',
],
あと、AdminLTEはjQueryが必要なので、
npm i jquery@3.5.1 --save
で入れた後
build: {
vendor: ['jquery', 'admin-lte'],
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
]
},
をconfig.jsに入れていくんだがこれがまた大変だった。
