vue3 + javascript + Pinia + TailWindowのプロジェクトの作成手順

Vue 3 + JavaScript + Pinia + Tailwind CSS プロジェクト作成手順

✅ 1. Node.js のインストール

Node.js が未インストールの場合は、以下から最新版（LTS）をダウンロードしてください：
🔗 https://nodejs.org/

---

✅ 2. Vue 3 プロジェクトの作成（Vite 使用）

npm create vue@latest

プロジェクト作成時の選択例：

• Project name: my-vue-app
• Add TypeScript? ❌ No
• Add JSX Support? ❌ No
• Add Vue Router? ✅ Yes（必要なら）
• Add Pinia? ✅ Yes
• Add Vitest? ❌ No（テスト不要なら）
• Add ESLint? ✅ Yes（任意）
• Add Prettier? ✅ Yes（任意）

---

✅ 3. プロジェクトディレクトリに移動

cd my-vue-app

---

✅ 4. Tailwind CSS の導入

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

---

✅ 5. Tailwind の設定ファイル編集

tailwind.config.js を以下のように編集：

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

---

✅ 6. Tailwind を CSS に組み込む

src/assets/main.css に以下を記述：

@tailwind base;
@tailwind components;
@tailwind utilities;

---

✅ 7. main.js に CSS をインポート

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

---

✅ 8. 開発サーバーの起動

npm install
npm run dev

http://localhost:5173 をブラウザで開く

---

✅ 9. Pinia ストアのサンプル作成（任意）

mkdir src/stores

src/stores/counter.js を作成：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Vue コンポーネントで使用例：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <div class="p-4">
    <p class="text-xl">Count: {{ counter.count }}</p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded" @click="counter.increment">＋</button>
  </div>
</template>

---

✅ 完成！

これで Vue 3 + JavaScript + Pinia + Tailwind CSS の開発環境が整いました。

---

📁 ディレクトリ構成（抜粋）

my-vue-app/
├── src/
│   ├── assets/
│   │   └── main.css
│   ├── stores/
│   │   └── counter.js
│   ├── App.vue
│   └── main.js
├── tailwind.config.js
├── package.json