nuxtjsの入門メモ
nuxtjsが気になったので適当にいじったメモ。本当に入門してるだけ。 後で buld編は書く予定。
インストール
npx create-nuxt-app sample
全部defaultで解答していった
? Project name sample ? Project description My classy Nuxt.js project ? Use a custom server framework none ? Use a custom UI framework none ? Choose rendering mode Universal ? Use axios module no ? Use eslint no ? Use prettier no ? Author name hiroyukim ? Choose a package manager npm
成功したらしい。
To get started: cd sample npm run dev To build & start for production: cd sample npm run build npm start
ディレクトリ直下は以下の様になっている
├── README.md ├── assets ├── components ├── layouts ├── middleware ├── node_modules ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── plugins ├── static └── store
開発サーバーの立ち上げ
とりあえず、立ち上げる
npm run dev
- 初期状態にしてはコンパイル重いなぁという感想
- アクセスはport3000
ℹ Preparing project for development 13:28:09 ℹ Initial build may take a while 13:28:09 ✔ Builder initialized 13:28:09 ✔ Nuxt files generated 13:28:09 ✔ Client Compiled successfully in 8.65s ✔ Server Compiled successfully in 7.59s ℹ Waiting for file changes 13:28:22 ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.3.4 │ │ Running in development mode (universal) │ │ Memory usage: 129 MB (RSS: 223 MB) │ │ │ │ Listening on: http://localhost:3000 │ │ │ ╰─────────────────────────────────────────────╯
構造
assets
LESS や SASS、JavaScript のようなコンパイルされていないファイル
> tree assets assets └── README.md
components
Vue.js のコンポーネントファイル
> tree components components ├── Logo.vue └── README.md 0 directories, 2 files
layouts
アプリケーションのレイアウトファイル
> tree layouts layouts ├── README.md └── default.vue 0 directories, 2 files
このテンプレートに従ってlayoutしていると考えられる
<template> <div> <nuxt/> </div> </template>
middleware
アプリケーションのミドルウェア。現状はないからREADMEだけ。
> tree middleware middleware └── README.md 0 directories, 1 file
pages
アプリケーションのビュー及びルーティングファイル
> tree pages pages ├── README.md └── index.vue 0 directories, 2 files
templateとscriptがindex.vueのキモだと思われる
<template> <section class="container"> <div> <logo/> <h1 class="title"> sample </h1> <h2 class="subtitle"> My classy Nuxt.js project </h2> <div class="links"> <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a> </div> </div> </section> </template> <script> import Logo from '~/components/Logo.vue' export default { components: { Logo } } </script>
設定
- nuxt.config.js
- このファイルにある設定を書き換えると色々出来るぽい