みなさん、こんにちは。どんぶラッコです。
今日は、私が 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 />
を大文字にしているのは、自己終了形式型コンポーネントのスタイルガイドに沿った表記にするためです。
不要ファイルの削除
/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
とコマンドを入力すると自動で表示されるようにしています。
Shell コマンドで自動化(作成途中)
毎回実施するのもだるいので、shellコマンドにまとめてみました。
nuxt.config.jsの書き換えとかはまだ未実装です(というより今後も実装する予定はない)
https://github.com/cha1ra/nuxt-init-setup
「自分はこれをやっています!」という方法があったら是非教えてください♪