以下をすべて実行しComponentsを揃えたものは以下のリポジトリからclone可能
https://gitlab.com/algoage/sonpo/ocr_web/-/commit/596cdcafeb0ed8a6b453d424998e2eb424914dfe
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
$ 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
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
$ docker-compose up
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
}
}
}
},
...
- buildしてup
その都度buildや、yarn installを忘れずに
Typescriptを使う場合には以下を参考に
https://qiita.com/miiiii/items/7d79f4f02303e8e486e3#create-nuxt-app-v2150
- Yuuniworks Notes
- 結構詳しくNuxt.jsについてまとめられているので読む
- Nuxt.jsの本格導入で遠回りしないためのTips v1.1 - Qiita
- Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
- nuxt.jsにおける「components」ディレクトリの規約(案)その1 - Qiita
- nuxt.js その5 storeの実装 - Qiita
- nuxt.js による UX/DX フレンドリーな Web サービス開発
- nuxtに関してのメリットを詳しく書いている記事
- Vue vuexでfirebaseのログイン保持 - Qiita
- Nuxt.jsを用いたプロダクト開発を通して得た知見
- [JS] Firebase Authentication の覚書 ① メールアドレス認証
ページがレンダリングされる前に実行してくれるもの
- Nuxtで画面に横断的にMiddlewareを適用する #nuxtjs #vuejs
- nuxt.js その6 middlewareによるナビゲーションガードの実装 - Qiita https://techblog.scouter.co.jp/entry/2019/04/10/163402
mountedのあとでVuexにStoreの値を反映してくれる
storageをwindow.sessionStorageとしているので、ページのセッションはブラウザを開いている限り有効となる。これでページのリロードを実行されても持続する。
- Vue.jsでbeforeunloadを正しく実装する
- Javascript Webページからの離脱時に確認メッセージを表示する方法
- vue.jsでフォームを離脱するときに警告をだすやつを実装する
- nuxt.js, vuetify ダイアログコンポーネント化サンプル - Qiita
- v-dialogの非同期を行う
- API: serverMiddleware プロパティ - 公式
- nuxt.js と serverMiddleware(express) で Twitterログインを実装した話 - Qiita
- Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた
- Node.jsとExpressでWeb APIを作ってみよう
- Nuxt.jsでAPIサーバーを建てる - Qiita
- How can I send a success status to browser from nodejs/express? - stackoverflow
- https://blog.cles.jp/item/9808
- https://github.com/gwenaelp/vue-diagrams?ref=kabnaoki.net
- https://anseki.github.io/leader-line/
- https://hashrock.hatenablog.com/entry/2017/11/20/012117
- https://vuejsexamples.com/a-svg-based-vue-component-library-of-diagrams/
- https://spiritree.github.io/vue-orgchart/#/edit
- https://jeffreyrn.github.io/vue-simple-flowchart/demo/