インストール

これがなきゃ始まらない。

npx nuxi@latest init sss

CLIでやっていきます。インストールができたらREADMEのとおりnpm install -> run dev。

フォルダ整理とファイル管理

必要なファイルをどんどんつくっていく。

追加したもの一覧は以下のとおりです。

root
├ assets
│ ├ css
│ │ ├ style.scss
│ │ ├ global
│ │ │ ├ _normalize.scss
│ │ │ ├ _setting.scss
│ │ │ └ _mixin.scss
│ │ ├ layout
│ │ │ ├ _header.scss
│ │ │ └ _footer.scss
│ │ └ object
│ │ 　 ├ _button.scss
│ │ 　 ├ _heading.scss
│ │ 　 └ _mainvisual.scss
│ └ img
│ 　 └ logo.png
├ layouts
│ └ default.vue
├ components
│ ├ layout
│ │ ├ Header.vue
│ │ ├ Globalnav.vue
│ │ └ Footer.vue
│ └ object
│ 　 └ Mainvisual.vue
└ pages
　 ├ index.vue
　 └ template
　 　 └ index.vue
├ plugins
│ └ app.js
├ 	
└ gulpfile.js

プラグイン

まず、このフォルダ構成で必要なパッケージを事前にインストールします。

必要なものが、HTMLコードをPUGに変える

npm i --save-dev pug pug-plain-loader

CSSはSCSSのほうが使いなれているので。

npm install sass --save-dev
または
npm i sass -D

SCSSで監視するためにgulpをいれます。

npm i gulp
npm i gulp-sass-glob

jsはjqueryを使いたいので、

npm install --save-dev jquery @types/jquery

結果的にはこんな感じのpackage.jsonになるかとおもいます。

"devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/jquery": "^3.5.16",
    "@types/node": "^18.17.3",
    "gulp-watch": "^5.0.1",
    "jquery": "^3.7.0",
    "npm-run-all": "^4.1.5",
    "nuxt": "^3.6.5",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "sass": "^1.66.0",
    "sass-loader": "^13.3.2",
    "sass-resources-loader": "^2.2.5"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "gulp-sass-glob": "^1.1.0"
  }

vueファイル

app.vue

<template>
  <NuxtLayout name="default">
    <NuxtPage />
  </NuxtLayout>
</template>

default.vue

<script setup></script>

<template lang="pug">
<Header />
main.l-main
  <slot />
<Footer />
</template>

<style></style>

pages/index.vue

<script setup>
useHead({
  title: 'base Page',
  meta: [
    { name: 'description', content: 'baseのページです。'}
  ]
})

</script>

<template lang="pug">

section.l-section
  .l-container
    h2 Base Page
</template>

<style lang="scss">
  

</style>

流れとしてはapp.vue > default.vue > index.vueになります。

ヘッダーとフッターに関してはそれぞれ<template>のなかにコードを書けば反映されます。

また、componentsのobjectフォルダは構築時に発生するコンポーネントをためておく場所になります。

そして最後にnuxt.config.tsにパスを通すために以下を追記します。

nuxt.config.ts

componentsのパスを通すためにconfigに追記します

　　components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],

scss

style.scss

// global
@import "global/normalize";
@import "global/setting";
@import "global/mixin";

// layout
@import "layout/header";
@import "layout/footer";
@import "layout/section";
@import "layout/post-content";
@import "layout/container";

// object

globalとlayoutは設定ファイルや共通したレイアウトのファイルになります。

objectファイルは構築時発生したコンポーネントのファイル郡になります。

これまでobjectの無限に増え続けるscssに関してはワイルドカード（*）でobjectフォルダの中身をインポートできましたが、現在ではできなくなってしまいました...。がどうしても「ファイルを作る」+「style.scssに追記」の動作が手間なのでgulpでどうにかしました。

css/objectフォルダを監視し、scssが追加されたら自動でstyle.scssに追記します

gulpfile.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const fs = require('fs');
const path = require('path');

gulp.task('watch:styles', function() {
  watch('assets/css/objects/*.scss', function(file) {
    if (file.event === 'add') {
      const fileName = path.basename(file.path, '.scss');
      const importStatement = `@import "objects/${fileName}";\n`;
      fs.appendFile('assets/css/style.scss', importStatement, err => {
        if (err) throw err;
        console.log(`Added import for ${fileName}`);
      });
    }
  });
});

また、nuxtを立ち上げる際のnpm run devとgulpを同時に走らせるためにpackage.jsonをすこし書き換えます。

"dev": "npm-run-all --parallel dev:*", // 書き換え
"dev:nuxt": "nuxi dev", // 追記
"dev:styles": "gulp watch:styles",　// 追記

js

jsのフォルダだけ特殊でpluginsにいれます。

Nuxtはpluginsディレクトリにあるファイルを自動的に読み込み、Vue アプリケーションの作成時にロードします。プラグインをサーバーサイドまたはクライアントサイドのみでロードするために、ファイル名に .server または .client というサフィックスが使用することができるため、assetsの中ではなくpluginsにいれます。

gapp.client.js

import $ from 'jquery'
export default defineNuxtPlugin(nuxtApp => {  

  function myApp () {
    console.log('code')
  }

  myApp();
})

以上でおおまかなファイル構成と中身になります。

ここから、pages/templateを量産して実装をしていきます。

おわりに

自分の中では、細かい調整はあれどフォルダ構成は完結したかなと思います。

テンプレートが完成したので、これを元にサイト制作に励んでいきます！

それでは！

Vtuber魔ノむえるさんの歌枠アーカイブファンサイトを作成しました！

ポケモン図鑑アプリを作りました！