◆当ページにはプロモーションが含まれています

JavaScript

Nuxt.jsをインストールしたら不要ファイルを書き換え・削除! – 初期設定の手順

みなさん、こんにちは。どんぶラッコです。

今日は、私が npx create-nuxt-appコマンドを叩いた時に実施している初期化手順をご紹介します。

私はVuetifyを使うので初期コマンドで vuetify をインストールするのですが、darkモードになっていたり、テンプレートの画像があったり、既にカスタマイズされてしまっていて億劫に思うことがあると思います。

そこで、いつも下記の手順でnuxt.jsのファイルを整えてから開発を開始しています。

みなさんの手順と是非見比べてみてください!

npx create-nuxt-app プロジェクト名

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in hogehoge
? Project name hoge
? Project description My perfect Nuxt.js project
? Author name hoge
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

私はこのタイミングで Vuetfiy.js, Axios, ESLint を導入してしまっています。

default.vue を書き換え

<template>
  <v-app>
    <v-content>
      <Nuxt />
    </v-content>
  </v-app>
</template>

/templates/default.vue を上記に上書きします。

<Nuxt />を大文字にしているのは、自己終了形式型コンポーネントのスタイルガイドに沿った表記にするためです。

https://jp.vuejs.org/v2/style-guide/index.html#%E8%87%AA%E5%B7%B1%E7%B5%82%E4%BA%86%E5%BD%A2%E5%BC%8F%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88-%E5%BC%B7%E3%81%8F%E6%8E%A8%E5%A5%A8

不要ファイルの削除

/components/static/pages の中身を削除してしまいます。

(Vuetify をインストールしている場合) nuxt.config.jsの書き換え

darkテーマが個人的に好きではないので、オフにします。

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false, // true から false に変更
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

以上で完了です!

/pages を書くときのテンプレート

あとは、好きに /pages フォルダに vueファイルを作っていけばOKです。

ちなみに、私は pages を書く時に↓をテンプレートとして使っています。

<template>
  <v-container>
    <v-row>
      <v-col>
        hoge
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {

}
</script>

Dashの機能を使って ;nuxt-layout とコマンドを入力すると自動で表示されるようにしています。

https://proglearn.com/2019/12/17/dash%e3%81%aesnippet%e6%a9%9f%e8%83%bd%e3%82%92%e6%b4%bb%e7%94%a8%e3%81%97%e3%81%9f%e3%82%89nuxt-js%e3%81%ae%e9%96%8b%e7%99%ba%e3%81%8c%e3%82%81%e3%81%a1%e3%82%83%e3%82%81%e3%81%a1%e3%82%83%e6%8d%97/

Shell コマンドで自動化(作成途中)

毎回実施するのもだるいので、shellコマンドにまとめてみました。

nuxt.config.jsの書き換えとかはまだ未実装です(というより今後も実装する予定はない)

https://github.com/cha1ra/nuxt-init-setup


「自分はこれをやっています!」という方法があったら是非教えてください♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です