Nuxt.js + TypeScriptでの開発事始め
Nuxt.jsとTypeScriptでのサイト制作の準備について解説しています。
前回のおさらい
この記事は前回の環境構築の続きです 今回のゴールは静的サイト製作なのでpageの追加から行なっていきます。
こんな感じで前回環境構築したのでその続きになります。
今回からはNuxt.jsの公式サイトを参考に進めていきます。 https://ja.nuxtjs.org/
app.htmlを追加する
IEの環境によって動作しないケースを踏まえた記載にします。
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
レイアウトを作成しデフォルトとエラーページを追加する
デフォルトとエラーページを作成します
デフォルト(default.vue)を追加する
<template>
<div>
<nuxt />
</div>
</template>
<script lang="ts">
export default {
layout: "default"
};
</script>
カスタムのテンプレートを使用する場合はこちらの公式が用意した動画のように使用するページでテンプレートを指定する。
エラーページ用のエラーレイアウト(error.vue)を作成する
エラーが発生した時にお知らせしてくれる用のレイアウトです。
エラーコードが分かる用に {{ error.statusCode }} でエラーコードを表示しています。
またTOPに戻るための導線も追加しました。
<template>
<PageTemplate>
<h1>こちらはエラーページです</h1>
<h2>エラーコードは {{ error.statusCode }} です。</h2>
<nuxt-link to="/">トップページへ戻る</nuxt-link>
</PageTemplate>
</template>
<script lang="ts">
export default {
props: ["error"],
layout: "error"
};
</script>
こちらのエラー用のレイアウトを追加した段階でまだ存在しないパスに遷移しようとするとこのようにエラーコードを表示できるようになりました。
エラー表示は開発初期に追加しておくと楽です。
ページを追加する
次にページを追加します。とりあえずトップページに該当するpages/index.vueを追加します。
デフォルトでtypescript、sassが使えるのが便利ですね。
基本的にsccはscoped cssで進めていきます。
<template>
<h2>TOP PAGE</h2>
</template>
<script lang="ts">
</script>
<style scoped lang="scss">
</style>
こちらのファイルを追加すしてnpm run devすると追加したページが適用されます。
ここまで完了するとあとはガンガン開発していけると思います。
nuxt.config.jsにheadを追加する
head: {
meta: [
{ charset: 'utf-8' },
],
}
エラーと同様に utf-8 を早い段階で入れておきます。
（稀にある文字化けバグを踏まないため）
感想
基礎の基礎ですが公式ドキュメントや公式が用意してくれている動画を見ながら進めていると知らなかったメソッドなどに気づくことができるので学びがありました。
今回の差分を僕のGithubにプッシュ済みです。
続く