Vue3 + TypeScript + Vue RouterからはじめるWebアプリケーション開発
Vue3 + TypeScript + Vue Routerを使ったWebアプリケーションの開発環境構築を簡単に紹介します。
インストール
Vue2ではVue CLIでプロジェクトを作成していましたが、Vue3ではViteという高速なビルドツールが使用でき、公式でも推奨しているため、Viteを使います。
※ViteはVue.jsの生みの親であるEvan You氏が開発に携わっているツール
# ViteでVueプロジェクトを初期化する
# - Project name: <プロジェクト名>
# - Select a framework: vue
# - Select a variant: vue-ts
npm init vite@latest
# パッケージをインストール
cd <プロジェクト名>
npm install
# Vue Routerをインストール
npm install vue-router@4Vue Routerを使う
まずはmain.tsでVueインスタンスにVue Routerを使うための設定を行います。
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'; // router.tsをインポート
const app = createApp(App)
app.use(router) // Vue Routerを使用する
app.mount('#app')次にrouter.tsでルーティングさせたいページをインポートして、ルーティング設定を追加します。
// router.ts
import { createRouter,createWebHistory } from 'vue-router';
import Home from "./pages/Home.vue";
import Page1 from "./pages/Page1.vue";
import Page2 from "./pages/Page2.vue";
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/Page1', name: 'page1', component: Page1 },
{ path: '/Page2', name: 'page2', component: Page2 },
]
const router = createRouter({
history: createWebHistory(), // HTML5 History モード
routes,
})
export default router;そしてルーティングさせたい部分で<router-view>を設置すれば、上で設定したパスにアクセスした時に、対象のページが表示されます。
<template>
<!-- リンク -->
<router-link to="/page1">Page1へ遷移</router-link>
<!-- パスとマッチしたページが表示される -->
<router-view></router-view>
</template>コードでページ遷移させたい場合は、useRouterをインポートし、router.push()で遷移させることができます。
<script lang="ts">
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
// 例えば、ボタンクリック時にページ遷移させる場合
const clickButton = () => {
router.push("/page1");
}
return {
clickButton
}
}
}
</script>デバッグ実行
次のコマンドを実行すると、ローカルサーバーが起動するので、表示されたlocalhostでアクセスすればページが表示されます。
npm run dev以上が、Vue3 + TypeScript + Vue Routerを使ったWebアプリケーションの簡単な環境構築の方法になります。さらに詳細な使い方を知りたい方は公式サイトをご参照ください。
ちなみに、Nuxt.jsというVue.jsのフレームワークを使えば、自動でルーティングしてくれたり、PWA（Webアプリケーションをスマホアプリのように動作させるもの）対応も簡単にできるので、おすすめです！
※Vue3に対応したNuxt3は現在ベータ版のため、まだ制限がありますが、TypeScriptやVite、Composlition APIなどに対応しているので、試してみるのもいいと思います。