Zenn
Open10

超スローペースでVue.jsを勉強していく #1 2024.2.4～

Bootstrap
Node.js
Vue.js
asataasata

2024.2.4 Vue CLIを使って新規プロジェクトを作成

本当にただ空のプロジェクトを作成するだけです．

↓この記事を参考にやりました(node/npmはその前からインスコ済)

https://qiita.com/C_HERO/items/318fe65871f8e53e8c80

環境構築には色んなやり方があったんですが，私の場合は以下が一番合ってそうだなと思ったので今後もこれで行きます．

  1. Vue CLIでvue create <project-name>で空のプロジェクトを作成
  2. npmでその他のパッケージ(bootstrap-vueとかwebpackなど)を入れる

ちなみにVueのバージョンはV3を使います．

記念にサンプルのスクショでも貼っておくか．

asataasata

2024.2.5 (1) GitHub Pagesで動作させるVue.jsのアプリケーションについて考える

最終的な目標として 「GitHub Pagesで動くようなアプリケーションを作る」 というのがある．

Vueで開発するのは一般的にはSPA(シングルページアプリケーション)なので，GitHub Pagesのような静的サイトホスティングでは正常に動かすのは難しい．

というわけで考えているのは以下のこと

  1. Vue Routerを使わずに，画面ごとにHTMLファイルを分割する．
  2. （エントリポイントが分かれるので）HTMLファイル間のデータの受け渡しはSession Storageを使用する．

Session Storageは各ドメインごとに保存されるので，アプリケーション用のサブドメイン ***.t-asa2000.net を確保しておく必要がある．

参考記事

https://qiita.com/Toxoxi/items/5dde43b4e7e6f3dc5cf4

おまけ(UIフレームワーク)

Bootstrap以外にも，Vuetifyというものがある．Material UI同様，Material DesignをベースとしたUIフレームワークなんだけど，こっちの方がより見た目がMaterial Designっぽい感じがする．

https://vuetifyjs.com/en/

asataasata

2024.2.6 クイズアプリ進捗 (4.3.4まで)

最初の問題と答えを表示させるところまで
（クイズ問題は私の好きな某ソシャゲーのネタで自作しました）

asataasata

2024.2.10 (1) クイズアプリ完成

クイズアプリを最後まで完成させました．お手本のソースコードをただ書き移すのではなく，効率化できそうな部分を自分なりにアレンジしました．

変更点の一部

次回からは，Vuetifyの勉強に移行していこうと思います．

記念スクショ

asataasata

2024.2.10 (2) Multi Pages Application におけるVueプロジェクトのディレクトリ構成について考えてみる

前提条件

  • Vue CLIを使用
  • コンポーネント設計にはAtomic Designを使用

考えてみた

  • public/
    • _common.html (各ページ共通のテンプレート)
  • src/
    • assets/
    • boot/ (エントリポイント)
      • _common.js (各ページ共通の処理)
      • index.js
      • <ページ名>.js
    • components/ (単一コンポーネント)
      • atoms/
        • ***.vue
      • molecuels/
        • ***.vue
      • organisms/
        • ***.vue
      • templates/
        • ***.vue
      • pages/
        • IndexPage.vue (コンポーネント名でIndexは禁止されているらしい)
        • <ページ名>Page.vue
  • package.json
  • package-lock.json
  • jsconfig.json
  • vue.config.js

エントリポイントを一か所のフォルダに全て集約し，HTML テンプレートやvue.createAppなどの各ページで共通する実装は_common.***というファイル名とした．

MPA用のvue.config.jsの書き方

vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	publicPath: "/",
	pages: {
		// マルチページ設定
		index: {
			entry: 'src/boot/index.js',
			template: 'public/_common.html',
			filename: 'index.html',
			title: 'Index Page'
		}
	  }
})

エントリポイントの実装

共通処理 (UIフレームワークの読み込み等)

src/boot/_common.js
import { createApp } from 'vue';

export default (component, element = "#app") => {
	/* ここに共通処理を書く */
	const app = createApp(component);
	app.mount(element);
}

ページ別のエントリポイント

src/boot/index.js
import common from `./_common`;
import page from `@/components/pages/IndexPage.vue`;

common(page);

なんかもっといいアイデアあれば教えてください．

追記：練習用リポジトリ公開しました

https://github.com/t-asa2000/vue-practice-npm/

asataasata

2024.2.10 (3) Multi Pages Application におけるVueプロジェクトのディレクトリ構成の最適解

あの後色々調べてみたところ，いい感じのサンプルコードを公開している方がいたので，これをベースにした．
https://github.com/wandersonpjbkn/vue-mpa-application-example/

最終的にこうなった

  • public/
    • index.html (共通テンプレートとしてindex以外でも使用)
  • src/
    • assets/
    • components/
    • pages/
      • index/
        • main.js
        • App.vue
      • <ページ名>/
        • main.js
        • App.vue
    • scripts/
      • boot.js (各エントリポイントの共通処理)
  • package.json
  • package-lock.json
  • jsconfig.json
  • vue.config.js

サンプルとの違いは，エントリポイントの共通処理をscript/boot.jsに分割し，各ページのmain.jsで読み込んでいることである．（実装は前回の投稿とほぼ同じ）

Atomic Designでコンポーネント設計をする場合，Pages 層を無くしてApp.vueに直書きした方が分かりやすくなる気がする．

asataasata

2024.2.12 自作コンポーネントの作成

図のようなページを短いソースコードで書けるような，自作コンポーネントの設計をしました．

<PageBase title="Vue 練習用">
	<Canvas title="タイトル" caption="キャプション">
		Vueで自作コンポーネントを作る練習
	</Canvas>
</PageBase>

PropsとSlotを使ったコンポーネントへのデータの受け渡しについて学習しました．

asataasata

2024.2.15 ナビゲーションドロワーを触る

公式Docsからパクってきたものだと，最後にクリックしたものがアクティブになる感じだったので，データバインディングで任意のメニューのアクティブ状態を固定するような実装に替えた．

<script>
	export default {
		data: () => ({
			drawer: false,
			items: [
				{
					title: 'ホーム',
					icon: 'mdi-home',
					current: true
				},
				{
					title: 'GitHub リポジトリ',
					icon: 'mdi-xml',
					link: "javascript:window.open('https://github.com/t-asa2000/vue-practice-npm')"
				},
				{
					title: '作成者の個人サイト',
					icon: 'mdi-account-circle',
					link: "javascript:window.open('https://t-asa2000.net/')"
				}
			],
		})
	}
</script>

<template>
	<v-navigation-drawer v-model="drawer" location="left" temporary>
		<v-list>
    		<v-list-subheader>メインメニュー</v-list-subheader>
			<v-list-item
				v-for="(item, i) in items"
				:key="i"
				:active="item.current"
				:href="item.link"
				color="primary"
				@click.stop="drawer = false"
			>
				<template v-slot:prepend>
					<v-icon :icon="item.icon" />
				</template>

				<v-list-item-title 
					:class="item.current ? ['font-weight-bold'] : []"
					v-text="item.title"
				/>
			</v-list-item>
		</v-list>
	</v-navigation-drawer>
</template>