Nuxt.jsで簡単のサイトを作ってみた。
Vue.jsとNuxt.jsを学習しているので、簡単なサイトを作って見ました。
npx create-nuxt-app <title>上記のコマンドでプロジェクトを作成します。
pagesディレクトリには、各ページのvueファイルを作成します。
今回は上記のように作成しました。
Nuxt.jsでは、Vue Routerのルーティングを自動で設定してくれます。pagesディレクトリにvueファイルを作るだけで、各ページを作ることが可能です。
componentsディレクトリには各ページで共通化したい部分を作成します。
今回はヘッダーとフッターを共通化したいので作成しました。
header.vue
<template><headerclass="header"><divclass="container"><h1>DEAL CAFE</h1><nav><ulclass="gnav"><li><router-linkto="/"active-class="active-list"exact>HOME</router-link></li><li><router-linkto="/drink"active-class="active-list"exact>DRINK</router-link></li><li><router-linkto="/info"active-class="active-list"exact>INFO</router-link></li><li><router-linkto="/contact"active-class="active-list"exact>CONTACT</router-link></li></ul></nav></div></header></template><stylelang="sass"scoped>.headerpadding:20px0box-shadow:001px1px#333margin-bottom:10px.containerdisplay:flexjustify-content:space-betweenalign-items:baseline.gnavdisplay:flexlimargin-left:10pxa&:hoverborder-bottom:2pxsolid.active-listborder-bottom:2pxsolid</style>footer.vue
<template><divclass="footer"><divclass="container"><p><small>DEAL CAFE</small></p></div></div></template><stylelang="sass"scoped>.footercolor:#ffftext-align:centerbackground:#333padding:30pxmargin-top:300px</style>共通化したcomponentはdefault.vueファイルで読み込みした。
default.vue
<template><div><header-section/><nuxt/><footer-section/></div></template><script>importheaderfrom'~/components/header.vue'importfooterfrom'~/components/footer.vue'exportdefault{components:{headerSection:header,footerSection:footer}}</script>scriptのcomponentsはキャメルケースで書いて、templateの中はケバブケースでもokです。
最後にビルドして終了です。
$ npm run build
簡単ではありますが、SPAサイトの完成です。
今後はもっと複雑なものも作成していきたいです。一応GitHub Pagesにデプロイしているので、良かったご覧ください。
https://to-ko5.github.io/vueDemoHp/
※GitHub Pagesにデプロイする時は、nuxt.config.jsファイルにrouter baseを追記する必要があります。
nuxt.config.js
exportdefault{router:{base:'/<repository-name>/'}}