Zenn
Closed12

Vite + Vue3で爆速開発のための準備の準備 #1 (vue-routerまでの予定)

Vue.js
Vue.js
メモ
Vite
satjopgsatjopg

はじめに

Vue3でSPAを作成するにあたってViteをベースに開発するための準備の準備を行っていく
準備の準備とは、開発をするために最低限これは必要だろう！というライブラリのセットアップを行うことを指す。
準備は実際に開発をしていくにあたってのルール整備やディレクトリ構成などを考え検証していくことを指す。
諸事自分用語のためあしからず....

記事にしようとしたが、スクラップのほうが流れで追いやすいと思ったので書いていく。

satjopgsatjopg

Viteで雛形を作る
雛形を作りたいディレクトリ上で以下のコマンドを入力

$ npm init vite@latest

対話形式で以下の通りに入力
viteの対話

作成されたディレクトリ配下に移動しnpm installとnpm run devを実行

$ cd <作成されたディレクトリ名>
$ npm install
$ npm run dev
satjopgsatjopg

まだ中身が少ないとはいえ早い(253ms)...これだけで若干感動 + 期待

index

satjopgsatjopg

src配下を@をrootとしてimportできるようにしておく

@ aliasの設定
tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@": [
+        "src"
+      ],
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
satjopgsatjopg

↑だけでは足りんかった。。。

デフォルトではViteがaliasを解決してくれないのでVite側の設定が必要。

方法としては2つある

  1. vite.config.tsにパス解決のための設定を追記する

pathが認識されなければ、以下追加を行う

@types/nodeをinstall
$ npm i -D @types/node

resolve > alias で指定できるので以下のように追加する

設定追記内容
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
+ import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true,
    port: 8080
  },
  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  }
})
  1. vite-tsconfig-paths を導入する

こちらの記事で知りました、ありがとうございます。
https://zenn.dev/k_u_0615/articles/34b7f7d4a79e52
https://chaika.hatenablog.com/entry/2022/05/14/083000

$ npm i -D vite-tsconfig-paths
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
+ import tsConfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true,
    port: 8080
  },
+  plugins: [vue(), tsConfigPaths()],
})

2番のがtsconfigと連動し管理するのが楽なため2番のやり方で進める。

satjopgsatjopg

ルーティングを書く前にルーティング対象とするコンポーネントを準備する。
ルーティング対象のコンポーネントはsrc/pagesに格納していくことにする。
とりあえずテストのため Top.vue Login.vue を作成しておく。

$ mkdir src/pages
$ touch src/pages/Top.vue
$ touch src/pages/Login.vue

中身は以下のようにしておく

pages配下のファイルの中身
src/pages/Top.vue
<script setup lang="ts">

</script>

<template>
  <span>Topページの予定です</span>
</template>

<style scoped>
</style>
src/pages/Login.vue
<script setup lang="ts">

</script>

<template>
  <span>Loginページの予定です</span>
</template>

<style scoped>
</style>
satjopgsatjopg

ルーター設定ファイルの作成

$ mkdir src/router
$ touch src/router/index.ts
設定ファイルの中身
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'top',
    component: async () => {
      const top = await import('@/pages/Top.vue');
      return top;
    }
  },
  {
    path: '/login',
    name: 'login',
    component: async () => {
      const login = await import('@/pages/Login.vue');
      return login;
    }
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

Viteの環境変数についてはこちらを読むこと

satjopgsatjopg

src/main.tsに追加する
他にも追加するものが増えそうなのでappを宣言しておく。

src/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')

各pagesコンポーネントが描画されるようにsrc/App.vueは以下のようにしておく

src/App.vue
<script setup lang="ts">
</script>

<template>
  <RouterView />
</template>

<style scoped>
</style>

npm run devをし、無事に動きました

このスクラップは2022/09/07にクローズされました