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

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


1. 项目初始化

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

1.1 安装 Vite 并创建项目

bash 复制代码
npm create vite@latest my-vue3-project --template vue
cd my-vue3-project

1.2 安装依赖

bash 复制代码
npm install

2. 安装必要的库

安装项目所需的依赖:

  • Axios:用于 HTTP 请求。
  • Pinia:用于状态管理。
  • Tailwind CSS:用于样式设计。
bash 复制代码
npm install axios pinia tailwindcss postcss autoprefixer

3. 配置 Tailwind CSS

3.1 初始化 Tailwind CSS

bash 复制代码
npx tailwindcss init -p

这会生成 tailwind.config.jspostcss.config.js 文件。

3.2 配置 tailwind.config.js

javascript 复制代码
// 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 文件:

css 复制代码
/* src/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

3.4 引入 Tailwind CSS

src/main.js 中引入 Tailwind CSS:

javascript 复制代码
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 文件:

javascript 复制代码
// src/store/index.js
import { createPinia } from 'pinia';

const pinia = createPinia();
export default pinia;

4.2 在 main.js 中使用 Pinia

javascript 复制代码
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

javascript 复制代码
// 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 文件:

javascript 复制代码
// 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 并发送请求:

javascript 复制代码
// 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. 运行项目

启动开发服务器:

bash 复制代码
npm run dev

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


8. 示例代码

8.1 App.vue

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

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 的项目。这个项目结构清晰,功能完善,适合作为现代前端开发的起点。你可以在此基础上继续扩展功能,例如添加路由、国际化等。

相关推荐
不想有bug的小菜鸟5 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238636 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559607 分钟前
前端代理,解决跨域问题讲解
前端
quitv12 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238121 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星22 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
_GR36 分钟前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
一粒沙-42 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http