（4）Vue 3 + Vite + Axios + Pinia + Tailwind CSS搭建一个基础框架

使用 Vue 3 + Vite + Axios + Pinia + Tailwind CSS 快速构建一个现代化的前端项目。以下是详细的步骤和代码示例，帮助你从零开始搭建一个完整的项目。

---

1. 项目初始化

使用 Vite 快速初始化一个 Vue 3 项目。

1.1 安装 Vite 并创建项目

npm create vite@latest my-vue3-project --template vue
cd my-vue3-project

1.2 安装依赖

npm install

---

2. 安装必要的库

安装项目所需的依赖：

• Axios：用于 HTTP 请求。
• Pinia：用于状态管理。
• Tailwind CSS：用于样式设计。

npm install axios pinia tailwindcss postcss autoprefixer

---

3. 配置 Tailwind CSS

3.1 初始化 Tailwind CSS

npx tailwindcss init -p

这会生成 tailwind.config.js 和 postcss.config.js 文件。

3.2 配置 tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3.3 创建 Tailwind CSS 入口文件

在 src/assets 目录下创建 css/tailwind.css 文件：

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

3.4 引入 Tailwind CSS

在 src/main.js 中引入 Tailwind CSS：

import { createApp } from 'vue';
import App from './App.vue';
import './assets/css/tailwind.css'; // 引入 Tailwind CSS

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

---

4. 配置 Pinia

4.1 创建 Pinia 实例

在 src/store 目录下创建 index.js 文件：

// src/store/index.js
import { createPinia } from 'pinia';

const pinia = createPinia();
export default pinia;

4.2 在 main.js 中使用 Pinia

import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store'; // 引入 Pinia
import './assets/css/tailwind.css';

createApp(App)
  .use(pinia) // 使用 Pinia
  .mount('#app');

4.3 创建 Store

在 src/store 目录下创建一个示例 Store，例如 userStore.js：

// src/store/userStore.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Guest',
    isLoggedIn: false,
  }),
  actions: {
    login(name) {
      this.name = name;
      this.isLoggedIn = true;
    },
    logout() {
      this.name = 'Guest';
      this.isLoggedIn = false;
    },
  },
});

---

5. 配置 Axios

5.1 创建 Axios 实例

在 src/utils 目录下创建 axios.js 文件：

// src/utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 示例 API 地址
  timeout: 5000,
});

export default instance;

5.2 在组件中使用 Axios

在组件中引入 Axios 并发送请求：

// src/components/ExampleComponent.vue
<script setup>
import axios from '../utils/axios';
import { ref } from 'vue';

const posts = ref([]);

axios.get('/posts').then((response) => {
  posts.value = response.data;
});
</script>

<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold mb-4">Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-2">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

---

6. 项目结构

最终的目录结构如下：

my-vue3-project/
├── public/
├── src/
│   ├── assets/
│   │   └── css/
│   │       └── tailwind.css
│   ├── components/
│   │   └── ExampleComponent.vue
│   ├── store/
│   │   ├── index.js
│   │   └── userStore.js
│   ├── utils/
│   │   └── axios.js
│   ├── App.vue
│   └── main.js
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
└── package.json

---

7. 运行项目

启动开发服务器：

npm run dev

访问 http://localhost:3000，即可看到项目运行效果。

---

8. 示例代码

8.1 App.vue

<script setup>
import ExampleComponent from './components/ExampleComponent.vue';
</script>

<template>
  <div class="min-h-screen bg-gray-100 p-8">
    <h1 class="text-3xl font-bold text-center mb-8">Vue 3 + Vite + Axios + Pinia + Tailwind</h1>
    <ExampleComponent />
  </div>
</template>

8.2 ExampleComponent.vue

<script setup>
import axios from '../utils/axios';
import { ref } from 'vue';
import { useUserStore } from '../store/userStore';

const posts = ref([]);
const userStore = useUserStore();

axios.get('/posts').then((response) => {
  posts.value = response.data;
});
</script>

<template>
  <div class="p-4 bg-white rounded-lg shadow">
    <h1 class="text-2xl font-bold mb-4">Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-2">
        {{ post.title }}
      </li>
    </ul>
    <div class="mt-4">
      <p>User: {{ userStore.name }}</p>
      <button
        @click="userStore.login('John Doe')"
        class="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Login
      </button>
      <button
        @click="userStore.logout()"
        class="bg-red-500 text-white px-4 py-2 rounded ml-2"
      >
        Logout
      </button>
    </div>
  </div>
</template>

---

9. 总结

通过以上步骤，你已经成功搭建了一个基于 Vue 3 + Vite + Axios + Pinia + Tailwind CSS 的项目。这个项目结构清晰，功能完善，适合作为现代前端开发的起点。你可以在此基础上继续扩展功能，例如添加路由、国际化等。