Nuxt.jsインストール手順備忘録

10871 ワード
フロントエンド Vue.js JavaScript nuxt.js フレームワーク JavaScript テキストリンク

Nuxt.jsインストール備忘録

  • バージョン 2.12.1
  • CDでインストールするディレクトリに移動
  • 以下のコマンドでインストール
  • project-name はプロジェクトの名前を入れる

npxを使う場合

npx create-nuxt-app <project-name>

yarnを使う場合

yarn create nuxt-app <project-name>

? Project name

? Project name xxx
  • プロジェクト名を入力

? Project description

  • 説明を入力
? Project description xxxxxx

Author name

  • 作者の名前を入力
? Author name xxx

Choose programming language

  • TypeScriptを使うか選択
? Choose programming language (Use arrow keys)
❯ JavaScript
  TypeScript

Choose the package manage

  • YarnとNpmのどちらかを使うか選択
? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

Choose UI framework

  • UIフレームワーク使うか選択
? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

Choose custom server framework

  • サーバーサイドのフレームワークを選択
? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

Choose the runtime for TypeScript

? Choose the runtime for TypeScript (Use arrow keys)
❯ Default
  @nuxt/typescript-runtime

Choose Nuxt.js module

  • Axios と PWA を使うか選択
  • スペースキーでチェックを付けます
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Choose linting tools

  • 静的解析の選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

Choose test framework

  • ユニットテストの選択
? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

Choose rendering mod

  • SSRかSPAの選択
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

Choose development tool

  • jsconfig.jsonと Semantic Pull Requestを入れるか選択
  • jsconfig.jsonはVS Code向けのツール
  • Semantic Pull RequestはGitHub向けのツール
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

インストール完了

起動する

yarnの場合

yarn run dev

npmの場合

npm run dev

ビルド

  • dist 以下にファイルが出力される
yarn run build

generate

  • dist 以下にHTMLの静的ファイルが出力させる
yarn run generate

その他

Sassを使う

  • Sassをインストール
npm install --save-dev node-sass sass-loader
  • vueファイルでlang="scssまたはlang="sassにするとSassが使える
<style lang="scss" scoped>

Pugやcoffeeも可能

Pug
npm install --save-dev [email protected] pug-plain-loader

<template lang="pug">
  h1.red Hello {{ name }}!
</template>
CoffeeScript
npm install --save-dev coffeescript coffee-loader

<script lang="coffee">
export default data: ->
  { name: 'World' }
</script>

.vue以外の独自で作るCSSを読み込む

  • nuxt.config.js のcssの部分にファイル名を入れる
css: [
  '@/assets/css/main.scss'
],

ルーティング

  • this.$route でURLが取れる
    • 例 this.$route.params.str
  • リンクを貼るときはnuxt-link :to=""を使う
  • パラメーターで動的に使うには _id.vue のようにファイル名にアンダースコアを付ける
<nuxt-link :to="'/xxx">リンク</nuxt-link>
  • generateするときに吐き出したいファイルを指定する時はnuxt.config.jsに設定する
  • 例 /controller/actionの時
generate: {
  routes: [
    '/controller/action'
  ]
}

メタタグ

各ページのメタタグの設定

  • head()で設定できる
head () {
  return {
    title: this.meta.title,
    meta: [
      { hid: 'description', name: 'description', content: '' },
      { hid: 'keywords', name: 'keywords', content: '' },
      { hid: 'og:type', property: 'og:type', content: '' },
      { hid: 'og:title', property: 'og:title', content: '' },
      { hid: 'og:description', property: 'og:description', content: '' },
      { hid: 'og:url', property: 'og:url', content: '' },
      { hid: 'og:image', property: 'og:image', content: '' },
    ]
  }
}

毎ページに入れるのも面倒なので、mixinsにまとめて変数にするのもあり

↓mixinsを作っておく

export default {
  head () {
    return {
      title: this.meta.title,
      meta: [
        { hid: 'description', name: 'description', content: this.meta.description },
        { hid: 'keywords', name: 'keywords', content: this.meta.keywords },
        { hid: 'og:type', property: 'og:type', content: this.meta.type },
        { hid: 'og:title', property: 'og:title', content: this.meta.title },
        { hid: 'og:description', property: 'og:description', content: this.meta.description },
        { hid: 'og:url', property: 'og:url', content: domain + this.meta.url },
        { hid: 'og:image', property: 'og:image', content: domain + this.meta.image },
      ]
    }
  }
}

↓mixinsを読ませてメタタグのテキストを変数にして受け渡す

import meta from '~/mixins/meta'

export default {
  data() {
    return {
      meta: {
        title: 'タイトル',
        description: 'ディスクリプタ',
        keywords: 'キーワード',
        type: 'article',
        url: '/controller/action',
        image: '/share.jpg',
      }
    }
  },
  mixins: [meta]
}