Vue JSとQuasarフレームワークでQRコードジェネレータを作る方法

あなたのようなVue JSは何ですか🙄)
Vue JS 今日の最も人気のあるJavaScriptフロントエンドのフレームワークの1つは、2014年2月にエヴァンあなたによって作成された、それは長年にわたって人気が高まっている.Vue JSの最新バージョンは2021年10月現在Vue 3です.
Vue CLIを次のコマンドでインストールできます👇🏽:

yarn global add @vue/cli
# OR
npm install -g @vue/cli

クエーサーフレームワークとは何か
Quasar Framework Vue JSのフレームワークを使用すると、簡単にシンプルにVue Jsのアプリを開発することができます、それはコンポーネントを提供し、スパ(シングルページアプリケーション)、PWA(プログレッシブWebアプリ)、Bex(ブラウザの拡張)、SSR(サーバー側レンダリングアプリ)、ハイブリッドモバイルアプリケーション、マルチプラットフォームデスクトップアプリケーションと他のすべての天のものを開発するための他の多くの機能を提供します.ここでドキュメントをチェックアウトできます.
クエーサーCLIは以下のコマンドでインストールできます👇🏽:

yarn global add @quasar/cli
# or
npm install -g @quasar/cli

Vue CLIとクエーサーCLIの両方がインストールされると、次のステップに進みます

新しいクエーサーアプリを作成する📱
我々は、我々の希望の場所に移動し、実行して新しいクエーサーアプリを作成します.

quasar create qr-generator

これはラップするのにしばらくかかるかもしれませんが、完了したら、新しく生成されたqr-generator 好みのIDEのフォルダ、Visual Studioのコードを使用します
このようなファイル構造を見るべきです👇🏽:

今、私たちは、1990年代に我々の端末を開くことによってアプリを実行しますqr-generator フォルダの場所と入力👇🏽:

quasar dev

我々は今、このようなホーム画面を参照してくださいする必要があります👇🏽:

今、我々は新しいクエーサーアプリを作成して、その時間は、コーディング部に入る


アプリのコーディング🖥
まず最初にやることはpages フォルダとオープンIndex.vue , 次のコードが表示されます.

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    >
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex'
})
</script>

イメージを削除し、入力フィールドとボタンを追加してVモデルを付けます.

<template>
  <q-page>

     <q-input v-model="qrLink" label="Input value to generate" />
     <br/>
     <q-btn color="primary" label="Generate QR Code" />

      <canvas id="qr-code">

    </canvas>

  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex',
  data(){
    return{
      qrLink: ''
    }
  },
  methods: {

  }
})
</script>

ここでQRコードを生成させるメソッドを作成します.

 methods: {
    generateQrCode: function(){
      console.log('generated code')
    }
  }

その後、ボタンを押して関数をバインドします@click

<q-btn color="primary" label="Generate QR Code" 
     @click="generateQrCode"
     />

ボタンをクリックするとコンソールをチェックします.

さて、実際にQRコードを生成する必要があります.これはQriousと呼ばれるライブラリをインストールする必要があります.

$ npm install --save qrious
# OR:
$ yarn add qrious

次にインポートします.

import QRious from "qrious";

次に、入力フィールドに妥当性検査を追加する必要があります.

<q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />

それからgenerateQrCode 関数は、いくつかの検証とQRコード自体を生成するコードを追加します.

generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
                level: "H",
                padding: 25,
                size: 300,
                element: document.getElementById("qr-code"),
                value: this.qrLink,
              });
      }
    }

ヴィオラ!我々はQRコードジェネレータを構築している🎊
コードは次のようになります.

<template>
  <q-page>
    <q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />
    <br />
    <q-btn color="primary" label="Generate QR Code" @click="generateQrCode" />

    <canvas id="qr-code"></canvas>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import QRious from "qrious";

export default defineComponent({
  name: "PageIndex",
  data() {
    return {
      qrLink: "",
    };
  },
  methods: {
    generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
          level: "H",
          padding: 25,
          size: 300,
          element: document.getElementById("qr-code"),
          value: this.qrLink,
        });
      }
    },
  },
});
</script>

それがこのように見えるならば、私に連絡してください

この記事のGithubレポをご覧くださいhere
My Github Profile
My Portfolio