Vuejs | さゆフィクション http://it.kensan.net aws wordpress などなどゆるーく書いてます Sun, 15 Dec 2024 19:46:18 +0000 ja hourly 1 https://wordpress.org/?v=6.7.1 https://it.kensan.net/wp-content/uploads/2023/03/cropped-icon-32x32.png Vuejs | さゆフィクション http://it.kensan.net 32 32 vue.jsのバージョン3にテスト(unit test)を追加する https://it.kensan.net/vue-js3-unit-test.html Sun, 15 Dec 2024 19:43:29 +0000 http://18.183.53.234/it/?p=2166 vue.jsのバージョン3にテスト(unit test)を追加する方法を書きます！

プロジェクト作成後に途中からテスト(unit test)を追加する方法について書いていきます。

vue.jsのバージョン3にテスト(unit test)を追加する

以下のコマンドで追加できます！これでvue3でテスト実行できるようになります。

vue add unit-jest

テストコードを書いてテスト実行してみる

テストコード

tests/unitフォルダ配下に「HelloWorld.spec.js」というファイル名でファイルを作成し、ファイルの中身は以下のコードにします

import { shallowMount } from '@vue/test-utils'


// テスト対象コード
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}


// テストコード
test('displays message', () => {
const wrapper = shallowMount(MessageComponent, {
props: {
msg: 'Hello world'
}
})


// Assert the rendered text of the component
expect(wrapper.text()).toContain('Hello world')
})

テスト実行

以下のコマンドで実行できます

npm run test:unit

まとめ

以下のコマンド実行で簡単にvue3でテスト実行できるようになりました！

vue add unit-jest
]]> vue.jsでAdmin LTEコンポーネントを使って爆速で画面開発する https://it.kensan.net/vue-js-admin-lte.html Sat, 12 Oct 2024 02:42:19 +0000 http://18.183.115.78/it/?p=2153 vue.jsでAdmin LTEコンポーネントを使ってみます。

Admin LTEコンポーネントを使わせてもらった方が効率的だよね？という考えです。

開発環境は構築済みのものとして進めますので、まだの場合は以下URLを参考にしてくださいー

 

 

https://it.kensan.net/it/vue-local-container.html
localhost

 

vue.jsでAdmin LTEコンポーネントを使う

Admin LTEのインストールをする

vue.jsのプロジェクトにAdmin LTEをインストールします。

以下のコマンドを実行すればOKです。

npm install admin-lte@^3.2 bootstrap jquery popper.js -save

ソースコードを修正する

ソースコードを修正して、Admin LTEを使ってみます。

main.jsの修正

以下のように修正します。こちらは共通設定のため、初回の1回のみ必要な修正です。

＜ファイル名＞

main.js

＜ファイルの中身＞


import { createApp } from 'vue'
import App from './App.vue'

import 'admin-lte/dist/css/adminlte.min.css';
import 'admin-lte/dist/js/adminlte.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

createApp(App).mount('#app');

画面表示用のコード(vueファイル)を修正してAdminLTEを使ってみます

試しに以下のヘッダーを実装してみます。

Main Header Component
AdminLTE v3.2 Documentation
adminlte.io

＜ファイル名＞

App.vue

＜ファイルの中身＞

<template>
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>

<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>

<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->

</template>

<script>

export default {
name: 'App'
}
</script>

動作確認する

以下のようなヘッダーが表示されれば成功です。

 

まとめ

vue.jsでAdmin LTEコンポーネントが使えました！！

これから頑張って開発していきますーー

]]> vue.jsをDockerコンテナ上でローカル開発できるようにする https://it.kensan.net/vue-local-container.html Sat, 12 Oct 2024 01:47:45 +0000 http://18.183.115.78/it/?p=2147 vue.jsをDockerコンテナ上でローカル開発できるようにしてみます！

以下の流れで進めていきます

  1. docker-compose.yml作成
  2. Dockerfile作成
  3. コンテナ起動
  4. コンテナ内でvueプロジェクト作成
  5. サーバ起動

では早速やってみます！

 

 

vue.jsのローカル開発環境構築

docker-compose.ymlファイル作成

 

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

Dockerfile作成

＜ファイル名＞

Dockerfile

＜ファイルの中身＞


FROM node:22
RUN npm install -g @vue/cli
EXPOSE 8080

コンテナ起動

以下のコマンドでコンテナを立ちあげます

docker-compose up --build

コンテナ内でプロジェクト作成します

まず以下のコマンドでコンテナの中に入ります。

docker-compose exec web bash

次に以下のコマンドでプロジェクトを作成します。

vue create sample

サーバ起動

以下のコマンドでサーバ起動します。

cd sample && npm run serve

動作確認

以下のURLにブラウザからアクセスして画面表示されればOKです！

http://localhost:8080/

以下のような画面が表示されるはずですー

 

docker-compose.ymlの微調整

vueがコンテナ上で正常に動くようになりましたが、このままですと、コンテナ起動のたびにコンテナ内で「cd sample && npm run serve」を実行する必要があります。

これは面倒なので以下のように、docker-compose.ymlに「cd sample && npm run serve」を追加して、コンテナ起動時にサーバ起動するようにします。

修正後のファイルは以下のようになります。

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    command: sh -c "cd sample && npm run serve"
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

 

まとめ

vue.jsのローカル開発環境構築をして、vue.jsをコンテナ上で動かしてみました。

ここから本格的にvue.jsの開発をしていきます！！

]]> Vue.jsのバージョン3でVue Routerを使用して画面を新規作成する（複数画面構成にする） https://it.kensan.net/vue-js_version3_vue-router.html Thu, 10 Oct 2024 05:19:58 +0000 http://13.231.168.135/it/?p=2136 Vue.jsのバージョン3でVue Routerを使用して画面を新規作成してみます。

Vueのインストールからはじめます！

 

 

Vueインストール

以下のコマンドでインストールします。

npm install -g @vue/cli

次にプロジェクト作成します。

プロジェクト作成

以下のコマンドで「sample」というプロジェクトを作成します。

vue create sample

→上記コマンド実行時の設定については以下を参照

  1. 「Manually select features」を選択してエンター
  2. 組み込むモジュールの選択が求められるので、「Router」にチェックを追加してエンター
  3. バージョン選択が求められるので「3.x」を選択してエンター
  4. そのほかはお好みの設定をしてプロジェクト作成

サーバ起動

以下のコマンドで、プロジェクト直下に移動してサーバ起動

 cd sample

 npm run serve

動作確認

以下のURLで画面表示の確認をします。

http://localhost:8080/ 

問題なく表示されればOKです。

次に画面を追加してみます

画面を追加してみる

フォルダ構成

ざっくり以下の構成になっていて「src/views」と「src/router」配下のファイルを追加・修正することで画面を追加できます。

src/views

→viewファイル格納フォルダ

→配下のテンプレート修正で画面の見た目を修正できる

src/router

→配下のindex.jsでルーティングを追加・変更可能

src/viewsにテンプレートファイルを追加

＜ファイル名＞

TestView.vue
＜ファイルの中身＞
<template>
<div class="about">
<h1>This is an test</h1>
</div>
</template>

src/routerにルーティングを追加

＜修正するファイル名＞

index.js

＜修正内容＞

以下のように、routesの定義にtestのビューへのルートを追加します。


const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }
]

src/App.vueに新しい画面へのリンクを追加する

＜修正するファイル＞

src/App.vue

＜修正内容＞

以下のようにテストページへのリンクを追加します。

<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</nav>
<router-view/>
</template>

動作確認

以下のURLで画面表示の確認をします。

http://localhost:8080/ 

以下のような画面が表示されれば成功です！

まとめ

Vue.jsのバージョン3でVue Routerを使用して画面を新規作成してみました。

意外と簡単に作成できましたが、画面の作り込みは大変そうだな〜〜

]]> コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画 https://it.kensan.net/vuejs-x-typescript%e3%81%aa%e7%92%b0%e5%a2%83%e3%81%a7chartjs%e3%82%92%e4%bd%bf%e3%81%86.html Fri, 17 Apr 2020 02:54:00 +0000 https://verdy-it.xyz/itblog/?p=139 Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみます。

コピペで実際にグラフ描画まで行けます。

インストールからプログラムの書き方まで記載しています。

完成イメージは以下となります。

chartjs

棒と折れ線の複合グラフを描画していきます。

本記事でやること
  • 棒と折れ線の複合グラフを描画
  • 使うもの
    • Vuejs
    • TypeScript
    • chartjs

 

vueプロジェクトの作成

Vueのインストールとプロジェクトの作成をして、Vueの表示確認まで行います。

やること

Vueのインストール
プロジェクトの作成
Vueの表示確認

vueインストール

まずはvueをインストールします。

npm install -g @vue/cli

vueプロジェクトの作成

次にプロジェクトの作成をします。

vue create chart

「chart」の部分がプロジェクト名です。

vueプロジェクト作成

上記のように表示されます。TypeScript を利用するために 「Manually select features」 を選択します。

vueプロジェクト作成

TypeScriptを選択(上下キーでカーソル移動してスペースで選択)します。

あとはお好みで選択してプロジェクトを作成する

vueプロジェクトの起動

cd <プロジェクト名>
npm run serve

上記コマンド実行後、「http://localhost:8080/」でアクセスできます。

アクセス時すると、以下のような画面が表示されます。

プロジェクト起動

次はchartjsのインストールをします。

vue-chartjsのインストール

次に以下コマンドでchartjsをインストールする

npm install vue-chartjs chart.js
npm install @types/chart.js -D

vueファイルの作成

環境は整ったのでvueファイルを修正・作成していきます！

まずsrcフォルダ内の「App.vue」の修正。「src/App.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

次に「App.vue」から呼ばれる「src/components/HelloWorld.vue」ファイルを修正します。

「src/components/HelloWorld.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div class="chart-container">
    <Chart :chartData="chartData" :chartOptions="chartOptions" :chartStyles="chartStyles" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { ChartData, ChartOptions } from "chart.js";
import Chart from "./Chart.vue";

@Component({ components: { Chart } })
export default class HelloWorld extends Vue {

  // チャートのオプション
   chartOptions: ChartOptions = {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [
        {
          id: "1",
          position: "left",
        },
        {
          id: "2",
          position: "right"
          
        }
      ]
    }
  };
  // チャートのスタイル: <canvas>のstyle属性として設定
   chartStyles = {
    height: "100%",
    width: "100%"
  };
  // チャートのデータ
   chartData: ChartData = {
    labels: ['ラベル1','ラベル2','ラベル3','ラベル4'],
    datasets: [
      {
        type: "bar",
        label: "説明１",
        data: [1000,2000,1500,1750],
        fill: false,
        lineTension: 0,
        borderColor: "#00008b",
        yAxisID:"1" // Y軸のIDを指定 
      },
      {
        type: "line",
        label: "説明２",
        data: [1,2,5,2],
        fill: false,
        lineTension: 0,
        borderColor: "#ff0000", 
        yAxisID:"2" // Y軸のIDを指定 
      }
    ]
  };

}
</script>

最後に「src/components/HelloWorld.vue」から呼ばれる「src/components/Chart.vue」ファイルを作成します。

このファイルはchartjs描画用コンポーネントで、他のvueからでも、必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能となります。

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import Chart from "chart.js";
import { Line, Bar,mixins } from "vue-chartjs";

@Component({})
export default class LineChartComponent extends Mixins(Line, Bar, mixins.reactiveProp) {
  @Prop()  chartData!: Chart.ChartData;
  @Prop()  chartOptions!: Chart.ChartOptions;

  @Watch('chartData')
  onChartDataChanged() {
    this.load();
  }
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
  load() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}
</script>

完成! Vue・TypeScript・chartjsを使用したグラフ

chartjs

まとめ

Vuejs × TypeScriptの環境でchartjsでグラフ描画ができました！

やったこと

環境構築：Vuejs × TypeScript
chartjsで棒と折れ線の複合グラフを描画

]]>