QRコードをたくさん発行したくて久しくNuxt.jsを触りました

半年ぶりにNuxtさんを触りました。「ちょっとブラウザで動かす小道具がほしい」のためだったんですが、相変わらず手軽だなという話。
webフロントの基礎なんもわからんマンなので、「いやそれだけだったらhtmlファイル1枚でいけるやろ・・・？」とか言われるのではと思って震えています。

正直なところ、「10月の更新がなんもなくなってしまうな・・・」というのが更新の動機です。

こんにちは。

f:id:nanoyatsu:20191028003304p:plain

https://nredjap.github.io/QrListPrint/

ちょっと欲しいシチュエーションがあったので、このまえこういうのをつくりました。
jsonを並べるとQRコードにしてくれます。適当に書いて適当にお使いください。ニーズあんのか。
リポジトリ： https://github.com/nredjap/QrListPrint

で、まあ本題としては、
「半年前にちょっとvueとNuxtを初めてカジっただけの僕でさえ、ちょっとしたツール欲しいなと思った時に選ぶ環境がこれなのマジすげえし実際手軽だと思う」という話です。

やったことをちょろっと書いておきます。マジでちょろっとしかない。

Nuxt インストール

$ npx create-nuxt-app QrListPrint

色々でてくるオプションは、prettier入れるとかBulma使う（半年前も使ったので）とか「PWA対応あんの？？とりあえず入れてみっか」とかしただけです。あとまたjest入れるだけ入れて・・・使ってない・・・。

フォーマッタらへん

  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
    'prettier/vue'
  ],
  plugins: ['prettier', 'jest'],
  // add your custom rules here
  rules: {
    'no-console': ['off'],
    'no-unused-vars': ['warn'],
    'prettier/prettier': ['error', { endOfLine: 'auto' }]
  }

.exlintrc.jsにずいずいと書いておきます。改行オプションあたりで思う動きにならなくてちょっと苦戦しました。

ライブラリ：qrcode-vue

www.npmjs.com こいつを使います。

npm install --save qrcode.vue

あとは書く

index.vueとQrFrame.vueでたぶん全部です。（貼り方が雑）

うごいたら

なんか携帯からアクセスしたら、スマホ Chromeくんが「ホーム画面に置く？」とか聞いてきてメッチャビビりました。なんも考えてなかったけどPWA対応が完了していました。
入力jsonのキャッシュとか何もしてないんですけど、ブラウザのなんとかLocalStorageとかに突っ込んどいたらそういうのも持っといてくれたりするんですかね。そしたらちょっとApp感でますね。今ただのショートカットですからね。ビビるわこんなもん。

あと今回はじめてgithubPagesを使いました。便利でした。おしまい。

なのログ

だから見てて下さい・・・俺の・・・変身