saneatsu
10/8/2019 - 8:24 AM

memo: Nuxt.js

nuxtjs_memo.md
content_copyfile_download
  • Rendered
  • Source

プロジェクトの作り方 with Docker

以下をすべて実行しComponentsを揃えたものは以下のリポジトリからclone可能

https://gitlab.com/algoage/sonpo/ocr_web/-/commit/596cdcafeb0ed8a6b453d424998e2eb424914dfe

1. frontディレクトリを作成

2. frontディレクトリと同じ階層に以下のdocker-compose.ymlを作成

version: '3.6'

services:
  front:
    build: ./front
    volumes:
      - ./:/shared
    working_dir: /shared/front
    ports:
      - 3001:3001
    environment:
      - HOST=0.0.0.0
    stdin_open: true # A: 最初はいるけどあとで消す
    tty: true # A: 最初はいるけどあとで消す
    command: yarn run dev # B
    # command: /bin/sh -c "yarn run build:prod && yarn run start:prod" # Production

3. Aがある状態で以下を実行

$ docker-compose build
$ docker-compose run front bash
/shared/front# yarn create nuxt-app front
/shared/front# yarn add install --dev pug pug-loader pug-plain-loader stylus stylus-loader

4. docker-compose.ymlのAを消してBを書き足す

5. front/Dockerfileの追加

FROM node:11.14.0

WORKDIR /front

RUN apt-get update && \
    apt-get install -y && \
    npm install -g npm && \
    # npm install -g yarn && \
    npm install -g vue-cli && \
    npm install -g @vue/cli-init

RUN yarn install

5. docker-compose upして立ち上がることを確認する

$ docker-compose up

6. nuxt.config.jsを編集

export default {
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        // 以下を追加しないとVuetifyのiconが使用できない
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      }
    ]
  },
  devModules: ['@nuxtjs/vuetify'],
  vuetify: {
   theme: {
     dark: false,
     themes: {
       light: {
         primary: '#FFFFFF',
         success: '#43A047', // green darken-1
       }
     }
   }
  },
  ...
  1. buildしてup

その都度buildや、yarn installを忘れずに

Typescriptを使う場合には以下を参考に

https://qiita.com/miiiii/items/7d79f4f02303e8e486e3#create-nuxt-app-v2150

Tips

ログイン

Event

middleware

ページがレンダリングされる前に実行してくれるもの

middlewareで直接アクセスを禁止する

snackbarをevent busでグローバルイベントにする

vuex-persistedstate

mountedのあとでVuexにStoreの値を反映してくれる

storageをwindow.sessionStorageとしているので、ページのセッションはブラウザを開いている限り有効となる。これでページのリロードを実行されても持続する。

ページ離脱時に確認ダイアログ

アニメーション

store

serverMiddleware

plugin

mixin

$ではじまるグローバルの変数について

ダイアグラムのプラグイン