Vue3 + TypeScript + Tailwindの環境構築
はじめに
VSCodeで快適なVue3コーディングをおこなうために、環境構築方法について調べてみました。
ついでにtailwindの導入についても紹介しています。
日本語の記事では情報がなかなか見当たらないものもあるため、Vue3ユーザーは必見です！
Vue3のプロジェクト作成
今回はVue3のプロジェクトをViteを使って作成していきます。
ViteはVueの作者が開発しているビルドツールで、Vue CLIに比べると動作が圧倒的に軽快です。
npm init vite@latest
上記コマンドを入力すると、プロジェクト名などの入力をするように促されます。
- Project name: ←プロジェクト名を入力
- Select a framework: ← vueを選択
- Select a variant: ← vue-tsを選択
ちなみに、プロジェクトの作成はテンプレートを使うことでも可能です。
npm init vite@latest my-vue-app --template vue-ts
VSCodeの設定
Volarのインストール
Vueの拡張機能として有名なものにVeturがありますが、Vue3ではVolarという拡張機能を使います。
Volarは下記のリポジトリで開発が進んでいます。
Veturをインストール済みの場合はVolarとの競合を避けるために、Vue3のプロジェクトではDisable(Workspace)にしておきます。
Volarのインストールは下記のマーケットプレイスへのリンクからおこなえます。
Take Over Modeを有効化
Volarインストール後、公式が推奨しているTake Over Modeを有効にします。
Take Over Modeを有効にすると、*.vueファイルの型チェックを強化してくれます。
Take Over Modeの詳細は下のDiscussionsで確認できます。
有効にする手順は簡単で、拡張機能のタブで@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環境での説明をおこないます。
まず、npmコマンドでTailwindのインストールをおこないます。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
インストールが完了後、tailwind.config.jsとpostcss.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