Nuxt.js + TypeScriptでの開発事始め
2020年06月26日
前回のおさらい
この記事は前回の環境構築の続きです
今回のゴールは静的サイト製作なので page の追加から行なっていきます。
こんな感じで前回環境構築したのでその続きになります。
今回からは Nuxt.js の公式サイトを参考に進めていきます。
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' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
}
エラーと同様に utf-8 の設定と viewport を早い段階で入れておきます。 （稀にある文字化けバグを踏まないため）
感想
基礎の基礎ですが公式ドキュメントや公式が用意してくれている動画を見ながら進めていると知らなかったメソッドなどに気づくことができるので学びがありました。
今回の差分を僕の Githubにプッシュ済みです。
続く