（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 的项目。这个项目结构清晰，功能完善，适合作为现代前端开发的起点。你可以在此基础上继续扩展功能，例如添加路由、国际化等。
原文地址：https://blog.csdn.net/qq_43258522/article/details/145253425
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！