当前位置：首页 > article >正文

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

article 2025/1/21 12:26:03

使用 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>