|
| 1 | +--- |
| 2 | +title: "PrimevueV4+TailwindV4配置" # 文章标题 |
| 3 | +date: 2025-09-12T14:30:00+08:00 # 文章创建日期 |
| 4 | +draft: false # 是否为草稿，true 表示草稿，不会在网站上显示 |
| 5 | +author: "runshell" # 文章作者 |
| 6 | +description: "介绍PrimevueV4+TailwindV4配置" # 文章描述 |
| 7 | +tags: ["Primevue", "vue3", "前端"] # 文章标签 |
| 8 | +categories: ["WEB开发"] # 文章分类 |
| 9 | +image: "/images/1757657429839.png" |
| 10 | +--- |
| 11 | + |
| 12 | +# 初始化项目 |
| 13 | + |
| 14 | +```bash |
| 15 | +npm create vue@latest . |
| 16 | +``` |
| 17 | + |
| 18 | +# 安装 primevue 及其相关组件 |
| 19 | + |
| 20 | +```bash |
| 21 | +npm install primevue primeicons |
| 22 | +npm install @primevue/themes |
| 23 | +``` |
| 24 | + |
| 25 | +# 安装自动导入插件 |
| 26 | + |
| 27 | +```bash |
| 28 | +npm install unplugin-vue-components -D |
| 29 | +npm install @primevue/auto-import-resolver -D |
| 30 | +``` |
| 31 | + |
| 32 | +# 安装 tailwindcss |
| 33 | + |
| 34 | +```bash |
| 35 | +npm install tailwindcss-primeui |
| 36 | +npm install tailwindcss @tailwindcss/vite |
| 37 | +``` |
| 38 | + |
| 39 | +# src/main.js 配置 |
| 40 | + |
| 41 | +```javascript |
| 42 | +import { createApp } from "vue"; |
| 43 | +import App from "./App.vue"; |
| 44 | +import PrimeVue from "primevue/config"; |
| 45 | +import Aura from "@primevue/themes/aura"; |
| 46 | +import "primeicons/primeicons.css"; |
| 47 | + |
| 48 | +const app = createApp(App); |
| 49 | + |
| 50 | +app.use(router); |
| 51 | +app.use(PrimeVue, { |
| 52 | + theme: { |
| 53 | + preset: Aura, |
| 54 | + options: { |
| 55 | + // 深色模式开关 |
| 56 | + darkModeSelector: false, |
| 57 | + }, |
| 58 | + }, |
| 59 | +}); |
| 60 | + |
| 61 | +app.mount("#app"); |
| 62 | +``` |
| 63 | + |
| 64 | +# src/style.css 配置 |
| 65 | + |
| 66 | +```css |
| 67 | +/* 导入tailwindcss */ |
| 68 | +@import "tailwindcss"; |
| 69 | +@import "tailwindcss-primeui"; |
| 70 | +``` |
| 71 | + |
| 72 | +# index.html |
| 73 | + |
| 74 | +```html |
| 75 | +<!DOCTYPE html> |
| 76 | +<html lang=""> |
| 77 | + <head> |
| 78 | + <meta charset="UTF-8" /> |
| 79 | + <link rel="icon" href="/favicon.ico" /> |
| 80 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 81 | + <!-- 加载css，使style.css中导入的tailwindcss生效 --> |
| 82 | + <link href="/src/style.css" rel="stylesheet" /> |
| 83 | + <title>Vite App</title> |
| 84 | + </head> |
| 85 | + <body> |
| 86 | + <div id="app"></div> |
| 87 | + <script type="module" src="/src/main.js"></script> |
| 88 | + </body> |
| 89 | +</html> |
| 90 | +``` |
| 91 | + |
| 92 | +# vite.config.js 配置 |
| 93 | + |
| 94 | +```javascript |
| 95 | +import { fileURLToPath, URL } from "node:url"; |
| 96 | +import vue from "@vitejs/plugin-vue"; |
| 97 | +import { defineConfig } from "vite"; |
| 98 | +// 导入tailwindcss |
| 99 | +import tailwindcss from "@tailwindcss/vite"; |
| 100 | +// 导入自动导入插件 |
| 101 | +import Components from "unplugin-vue-components/vite"; |
| 102 | +import { PrimeVueResolver } from "@primevue/auto-import-resolver"; |
| 103 | + |
| 104 | +// https://vite.dev/config/ |
| 105 | +export default defineConfig({ |
| 106 | + plugins: [ |
| 107 | + vue(), |
| 108 | + // 加载tailwindcss |
| 109 | + tailwindcss(), |
| 110 | + Components({ |
| 111 | + // 自动导入组件 |
| 112 | + resolvers: [PrimeVueResolver()], |
| 113 | + }), |
| 114 | + ], |
| 115 | + resolve: { |
| 116 | + alias: { |
| 117 | + "@": fileURLToPath(new URL("./src", import.meta.url)), |
| 118 | + }, |
| 119 | + }, |
| 120 | +}); |
| 121 | +``` |
0 commit comments