📌

Vue3 + TypeScript + Tailwindの環境構築

3 min read

はじめに

VSCodeで快適なVue3コーディングをおこなうために、環境構築方法について調べてみました。
ついでにtailwindの導入についても紹介しています。
日本語の記事では情報がなかなか見当たらないものもあるため、Vue3ユーザーは必見です!

Vue3のプロジェクト作成

今回はVue3のプロジェクトをViteを使って作成していきます。
ViteはVueの作者が開発しているビルドツールで、Vue CLIに比べると動作が圧倒的に軽快です。

https://vitejs.dev/
npm init vite@latest

上記コマンドを入力すると、プロジェクト名などの入力をするように促されます。

  1. Project name: ←プロジェクト名を入力
  2. Select a framework: ← vueを選択
  3. Select a variant: ← vue-tsを選択

ちなみに、プロジェクトの作成はテンプレートを使うことでも可能です。

npm init vite@latest my-vue-app --template vue-ts

VSCodeの設定

Volarのインストール

Vueの拡張機能として有名なものにVeturがありますが、Vue3ではVolarという拡張機能を使います。
Volarは下記のリポジトリで開発が進んでいます。

https://github.com/johnsoncodehk/volar

Veturをインストール済みの場合はVolarとの競合を避けるために、Vue3のプロジェクトではDisable(Workspace)にしておきます。

Volarのインストールは下記のマーケットプレイスへのリンクからおこなえます。

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Take Over Modeを有効化

Volarインストール後、公式が推奨しているTake Over Modeを有効にします。
Take Over Modeを有効にすると、*.vueファイルの型チェックを強化してくれます。
Take Over Modeの詳細は下のDiscussionsで確認できます。

https://github.com/johnsoncodehk/volar/discussions/471

有効にする手順は簡単で、拡張機能のタブで@builtin typescriptと入力し、TypeScript and JavaScript Language FeaturesをDisable(Workspace)するだけです。

VSCodeを再起動後、適当なvueファイルを開けばこのようなポップアップが表示され、Take Over Modeが有効になります。

SFCファイルの型チェックライブラリのインストール

Valorによって型の違反はエディタ上に赤線表示がされるようになりますが、コンパイル自体は通ってしまいます。
そのため型チェックを別で走らせるvue-tscというライブラリをインストールすることをおすすめします。

npm install -D vue-tsc

インストール後、package.jsonに型チェック用のスクリプトを記述しておきます。

"scripts": {
    "dev": "vite",
+   "tsc": "vue-tsc --noEmit",
+   "build": "npm run tsc && vite build",
    "serve": "vite preview"
}

Tailwindのインストール

CSSのフレームワークである、Tailwindをインストールします。
Tailwindのインストールは環境(Vue3+ViteやNuxt, Reactなど)によって異なるため、自身の環境に合った手順でおこなうようにしてください。
ここではVue3 + Vite環境での説明をおこないます。

https://tailwindcss.com/docs/installation

まず、npmコマンドでTailwindのインストールをおこないます。

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

インストールが完了後、tailwind.config.jspostcss.config.jsの生成をおこなうコマンドを実行します。

npx tailwindcss init -p

次に、Tailwindのツリーシェイクをおこなうための設定を追記します。
この設定によって、使っていないTailwindのスタイルがプロダクションコードから自動的に除外されます。

// 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: [],
}

最後に、./src/index.cssを作成し、./src/main.tsで読み込めば完了です。
@tailwind hoge;の詳細については割愛しますが、例えば@tailwind utilities; には.flexや.opacity-0などが定義されています。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

import './index.css'を追記。

import { createApp } from 'vue'
import App from './App.vue'
+ import './index.css'

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

環境構築の手順は以上となります。
お疲れ様でした。!

Discussion

ログインするとコメントできます