この記事の目的

この記事の対象読者

前提

node v22.11.0
vite v6.0.1

プロジェクトの自動生成

以下コマンドを実行｡

npm create vite@6.0.1 {プロジェクト名} -- --template vue-ts

生成されたプロジェクトについて

ディレクトリ構造

.
├── README.md // README.md
├── index.html // エントリーポイント
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue // 自動生成されるコンポーネント
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue // 自動生成されるコンポーネント
│   ├── main.ts 
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Vue 周り

index.html

index.html の body 要素下には下記コードが実装されている｡

<div id="app"></div>
<script type="module" src="/src/main.ts"></script>

script タグで main.ts を読み込んでいる｡

main.ts

main.ts では､下記コードが実装されており､アプリケーション API | Vue.js によると､ createApp() で作成されたアプリケーションインスタンスを index.html の id 属性値が app の div 要素にマウントしている｡
createApp() の第一引数はルートコンポーネントを指定する｡
ここでいうと､ App.vue で定義されたコンポーネントのこと｡

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

App.vue

下記のような実装で HelloWorld コンポーネントを msg の値に Vite + Vue を渡して呼び出している｡

<HelloWorld msg="Vite + Vue" />

HelloWorld.vue

defineProps<{ msg: string }>()

で親コンポーネント (App.vue) から msg の値を受け取り､

<h1>{{ msg }}</h1>

で表示している｡
{{ 変数名 }} はマスタッシュ構文と呼ばれるもので､ Vue ではこの構文を用いて引数の値を呼び出している｡

const count = ref(0)

このコードでは､ ref() 関数を用いて､初期値が 0 のリアクティブ変数 count を定義している｡
リアクティブ変数として定義されると､値の変更が監視され､値の変更が画面に反映される｡
下記コードでは､ボタンをクリックすると count の値が 1 増え､このとき count がリアクティブ変数として定義されていることでクリックする度に count の値が画面上でも 1 増える｡

<button type="button" @click="count++">count is {{ count }}</button>

その他

vite.config.ts: Vite の設定が記載されている
tsconfig.json､ tsconfig.app.json､ tsconfig.node.json: TypeScript の設定が記載されている

参考文献

Vue.js 公式ガイド