こなさんち

しがないメンヘラエンジニアの日記。

Nuxtのディレクトリ構造、nuxt.config.js、SSLについて

備忘録のようなメモ。

前提

@ は、ソースのルートディレクトリを指す。

参考

最初の最初で私がハンズオンとして参考にした動画は

www.youtube.com

ディレクトリ構造

公式サイト

@

├ assets:静的ファイルの場所。画像ファイルとかもここなのか?いや、このご時世s3などがデフォなのかもしれない。

├ components:ページとは違い、ページの中の一部品をコンポーネントとしてここに入れていく。

├ layouts:レイアウトというだけあって、全ファイルの共通な部分を設定していく。

├ middleware:サーバサイドのフレームワークを触ったことがある人ならわかるかもしれないが、要は、各ページに移動する前に何かしらの処理(見せていい・悪い)を設定するところ。ログインした人の認可など。

├ pages:ここにページを入れていく。ルーティングも兼ねているため便利。

├ plugins:全ページで共通の関数などの定義と言う認識。使い方のリンクは↓ qiita.com

├ static:前述のassetsとの違いは今の所未把握。ただ、デフォルトでfaviconが入っていることを考えるとこちらがデフォなのかもしれない。

└ store:状態を保持するためのjsファイル置き場。それこそ、今ログインしているか否か、などである。

SSLについて

qiita.com

qiita.com

blog.ryou103.com

qiita.com

内容

今回AdminLTE3を用いるに当たって

npm i admin-lte@^3.0 --save

からが長かった。

まず、nuxt.config.jscss プロパティに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に入れていくんだがこれがまた大変だった。