【Vuetify3】v-overlay
タイトルの備忘録。
現状vuetify2の公式ドキュメントしか参照できないが、これ通りにvuetify3で試しても動作しなかった。
調べたところ以下の回答通りに試すと動作した。
まだβ版なので仕様が確定していないと思われる。
以下サンプル。
(追記)
後で見るとvuetify3のサイトも見えるようになっていてちゃんと書いてあった。
<template> <div class="text-center"> <v-btn color="error" @click="overlay = !overlay" > Show Overlay </v-btn> <v-overlay v-model="overlay"></v-overlay> </div> </template>
【Vite+Vue3+TypeScript+Vuetify】プロジェクトの作成
以下のガイドを参考にプロジェクトを作成する。
前提
- Vuetify 3を正しくインストールするには、 vue- cli5.0が必要。
vue --version @vue/cli 5.0.4
プロジェクトの作成
Viteのプロジェクトを作成する。
npm create vite@latest
順に選択していく。
これで完了。
Vuetifyの追加
作成したプロジェクトへ移動する。
cd portfolio
vuetifyを追加する。
vue add vuetify
Vite Preview (Vuetify 3 + Vite)を選択する。
これで完了。
npm install
npm run dev
localhostへアクセスする。
【Vue.js+TypeScript】Vue Routerによるページ遷移
以下の記事を参考にさせていただきページ遷移ができるようになった。
Vue Routerをインストールする。
npm install vue-router@4
router.ts
import {createRouter, createWebHistory} from 'vue-router'; import TopView from "./pages/TopView.vue" import InfoView from "./pages/InfoView.vue" import AppsView from "./pages/AppsView.vue" const routes = [ {path: '/', name: 'top', component: TopView}, {path: '/info', name: 'info', component: InfoView}, {path: '/apps', name: 'apps', component: AppsView}, ] const router = createRouter({ history: createWebHistory(), // HTML5 History モード routes, }) export default router;
main.ts
import {createApp} from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')
App.vue
<script setup lang="ts"> </script> <template> <router-link to="/">Top</router-link> | <router-link to="/info">Info</router-link> | <router-link to="/apps">Apps</router-link> <router-view/> </template>
TopView.vue
<script setup lang="ts"> </script> <template> <h1>Top</h1> <img alt="Vue logo" src="../assets/logo.png"/> </template> <style scoped> </style>
【Vue.js+TypeScript】Vueコンポーネント
足し算、引き算をするVueコンポーネントのサンプル。
MuButton.vue
<script setup lang="ts"> import {ref} from 'vue' const count = ref(0) const increment = () => { count.value++ } const decrement = () => { if (count.value == 0) { return } count.value-- } </script> <template> <h1>{{ count }}</h1> <button type="button" @click="increment">IncrementButton</button> <button type="button" @click="decrement">DecrementButton</button> </template> <style scoped> </style>
【Learning Domain-Driven Design】英単語メモ
読めなかった英単語のメモ。
いつ、どこでその単語に遭遇して調べたのかメモしていく。
Learning Domain-Driven Design
Preface
2022/5/4(水)
- Preface: 序文
- ecstatic: 夢中の、有頂天の
- move on to: 乗り換える
- straightforward: まっすぐな、率直な、簡単な
- indeed: 確かに
- eventually: 最終的に
- fall into: ~に落ちる
- intricacy: 複雑(さ)
- obstacle: 障害
- methodology: 方法論
- democratize: 民主化する
- decompose: 分解する
- crucial: 重要
- intend: 意図する
Introduction
2022/5/5(木)
- diverse: 多様
- retailer: 小売業者
- in a sens: ある意味で
- suboptimal: 最適ではない
- numerous: 多数
- discipline: 規律
- conduct: 行為、行う
- pinpoint: 正確な位置、正確に示す、極めて正確な(英語だと思ってなかった)
- thwarting: 妨害する、反対する
- stakeholder: 利害関係者(英語だと思ってなかった)
- alleviating: 軽減する
- make sense: 意味をなす、意味がとれる、分かる
PART1 Strategic Design
2022/5/14(土)
- finer-gained: きめの細かい、粒子状の
- cultivate: 耕す
- leverage: てこの作用、影響力、優位性
- coarse grained: 目の粗い、粗野な
CHAPTER1 Analyzing Business Domains
- come up with: 思いつく
- pursue: 追求する
- resounding: 鳴り響く、めざましい、顕著な
- cannonical: 代表的な、典型的な
- diverse: 様々
2022/5/15(日)
- overarching: 包括的な
- interact: 相互作用、影響する
- competitor: 競合他社
- comprising: 構成する
- Google Ads: Google広告
2022/5/22(日)
- short-lived: 一時的な
- competitive: 競争心の強い
- monolithic: 一枚岩でできた
- reliable: 信頼性のある
- transparent: 透明な
2022/5/29(日)
- fraud: 詐欺
- contrary to: ~に反して
【Vue.js】Viteで Vue.js + TypeScript のプロジェクトを作成、FirebaseへDeploy、GitHub Actionsで自動的にDeploy
プロジェクトの作成からDeployまでの備忘録。
※以下はIntelliJ IDEAのターミナルで実行している。
プロジェクトの作成
1.ターミナルで以下を実行する。
npm init vite@latest
2.プロジェクト名を入力する。
3.vue を選択する。
4.TypeScriptを利用したいため vue-ts を選択する。
5.表示された通り入力し、サーバを立ち上げる。
6.アクセスする。
7.IntelliJ IDEAの Open... からプロジェクトを読み込む。
FirebaseへのDeploy
Firebaseでプロジェクトを作成
続行して行くと作成できる。
端末へfirebase-tools のインストール
npm install -g firebase-tools
Firebaseとの連携
firebase login
Firebaseへの接続設定を追加
firebase init
Spaceキーで選択し、エンターを押す。 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Use an existing project を選択。
先ほど作成したプロジェクトを選択。
What do you want to use as your public directory? は dist を入力。
pushしたときに自動的にDeployしたいため、以下はYesとする。
Set up automatic builds and deploys with GitHub?
リポジトリの情報 user/repository を入力する。
以下もYesとする。
Set up the workflow to run a build script before every deploy?
以下も例の通り入力する。
npm ci && npm run build
ここでnpm ciを忘れると依存関係を解決できずにBuildに失敗する。
これで firebase-hosting-pull-request.yml が作成される。
プルリクエストがマージされたときもDeployするようにしておく。
これで firebase-hosting-merge.yml が作成される。
これで初期化は完了。
後は以下を実行してFirebaseへDeployする。
npm run build
firebase deploy
Hosting URL: へ表示されたURLへアクセスするとDeployされていることが確認できる。
GitHub Actionsで自動的にDeploy
上記で作成されたFirebase関連のファイルをcommit、pushすると、GitHub上でworkflowが実行される。
ここでポイントなのが、前述のFirebaseとの連携で Actions secrets がGitHubへ登録されているため、スムーズに連携連携することができている。
Firebaseの画面を見るとGitHub ActionによりDeployされている。