【Vue3】ViteでVue3 + TypeScript + Tailwind CSS + Vue Routerの環境をサクッと作成

ビルドツールとしてVue CLIではなくViteを利用してアプリ作成する際のメモ。

VueCLIよりもViteの方がbuildやホットリローディングが早いため、積極的に個人開発で利用していくことにしました。 (後、ミーハーな自分としては新しい技術が使いたいなと...。)

ViteはVueの創作者であるEvan You氏が生み出したビルドツールです。

github.com

ViteでVue3 + TypeScriptの環境を作り、Tailwind CSSとVue Routerを導入するまでの手順をメモとして残します。 厳密に言えばViteでTailwindCSSとVueRouterを導入はしませんがご了承ください。

※各種必要なツールは既にinstall済みとして書きます。

1 ビルドコマンドを入力

npm init vite

2 プロジェクト名を入力

✔ Project name: … hoge_app

3 使用するFWを選択

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
 >  vue
    react
    preact
    lit-element
    svelte

4 JSかTSか選択

? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

5 Done!

Done. Now run:

  cd hoge_app
  npm install
  npm run dev

6 TailwindCSSを導入

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

↑でtailwindcssで必要なtailwindcss.config.js postcss.configの2つのconfig fileが作成される。

・tailwind.cssを作成(@/src/assets/styles/tailwind.css)

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

・main.tsでtailwindcssをimportする。

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/styles/tailwind.css";

createApp(App).mount("#app");

・tailwind.config.jsを書き換える

  // tailwind.config.js
  module.exports = {
   - purge: [],
   + purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

7 Vue-Routerの導入

 npm install vue-router@next

ここの注意点ですが、Vue3では@nextでinstallします。 npm install vue-routerですと、正常に動作しません。

package.jsonを確認

  "dependencies": {
    "vue": "^3.2.6",
    "vue-router": "^4.0.11" ⇦追加されました
  },

次に、router/index.tsを作成します。

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
    {
        path: "/home",
        name: "Home",
        component: Home,
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

こちらで完了です。最後にrouter確認。

App.vue

<template>
  <router-link to="/" class="px-2">HOME</router-link> |
  <router-link to="/" class="px-2">ABOUT</router-link>
</template>

vue-router導入後のトップページ

以上でViteでVue3 + TypeScript + Tailwind CSSの環境をサクッと作成することができました。 個人的にこの環境はVueですとモダンで好みです。