プロジェクト作成後に途中からテスト(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-jestAdmin 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コンポーネントが使えました！！
これから頑張って開発していきますーー
]]>以下の流れで進めていきます
- docker-compose.yml作成
- Dockerfile作成
- コンテナ起動
- コンテナ内でvueプロジェクト作成
- サーバ起動
では早速やってみます！
vue.jsのローカル開発環境構築
docker-compose.ymlファイル作成
＜ファイル名＞
docker-compose.yml
＜ファイルの中身＞
services:
web:
build: .
image: vueweb
volumes:
- .:/app
container_name: 'web'
ports:
- '8080:8080'
tty: trueDockerfile作成
＜ファイル名＞
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のインストールからはじめます！
Vueインストール
以下のコマンドでインストールします。
npm install -g @vue/cli次にプロジェクト作成します。
プロジェクト作成
以下のコマンドで「sample」というプロジェクトを作成します。
vue create sample→上記コマンド実行時の設定については以下を参照
- 「Manually select features」を選択してエンター
- 組み込むモジュールの選択が求められるので、「Router」にチェックを追加してエンター
- バージョン選択が求められるので「3.x」を選択してエンター
- そのほかはお好みの設定をしてプロジェクト作成
サーバ起動
以下のコマンドで、プロジェクト直下に移動してサーバ起動
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
vueプロジェクトの作成
Vueのインストールとプロジェクトの作成をして、Vueの表示確認まで行います。
やること
Vueのインストール
プロジェクトの作成
Vueの表示確認
vueインストール
まずはvueをインストールします。
npm install -g @vue/cli
vueプロジェクトの作成
次にプロジェクトの作成をします。
vue create chart
「chart」の部分がプロジェクト名です。
上記のように表示されます。TypeScript を利用するために 「Manually select features」 を選択します。
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を使用したグラフ
まとめ
Vuejs × TypeScriptの環境でchartjsでグラフ描画ができました！
やったこと
環境構築：Vuejs × TypeScript
chartjsで棒と折れ線の複合グラフを描画