<think>我们有一个明确的需求：
使用vite、
vue3、pinia（用户写成了
pina，应该是笔误）、pinia-plugin-persistedstate、el-switch和element-plus实现主题颜色切换。
我们将
使用Pinia来管理主题状态（例如亮色/暗色模式），并
使用pinia-plugin-persistedstate来持久化这个状态，这样用户刷新页面后主题设置不会丢失。
同时，我们将
使用Element Plus的el-switch组件来切换主题，并且Element Plus本身支持动态主题切换（通过修改html的class或
使用内置的暗黑主题）。
步骤：
1. 创建
Vue3项目（
使用Vite）
2. 安装必要的依赖：pinia, pinia-plugin-persistedstate, element-plus
3. 配置Pinia和持久化插件
4. 创建一个Pinia store来管理主题状态
5. 在main.ts中全局引入Element Plus，并根据主题状态设置Element Plus的主题
6. 创建一个切换主题的组件（
使用el-switch）
7. 在App中
使用这个组件，并确保主题状态改变时能够动态切换Element Plus的主题
注意：Element Plus有两种方式切换暗黑主题：
-
使用CSS变量（自定义主题）需要自己编写样式
- 或者
使用自带的暗黑主题：只需要在html上添
加类名`dark`（但注意，Element Plus的暗黑主题需要引入暗黑样式）
这里我们选择
使用Element Plus自带的暗黑主题，这样比较简单。
步骤详解：
1. 创建项目（如果已有项目可跳过）
```bash
npm create
vite@latest my-project -- --template
vue
cd my-project
npm install
```
2. 安装依赖：
```bash
npm install pinia pinia-plugin-persistedstate element-plus
```
3. 配置Pinia和持久化插件：
在src目录下创建store/index.ts：
```
typescript
import { createPinia } from &#
39;pinia&#
39;
import piniaPluginPersistedstate from &#
39;pinia-plugin-persistedstate&#
39;
const pinia = createPinia
()
pinia.use
(piniaPluginPersistedstate
)
export default pinia
```
4. 在main.ts中引入pinia和element-plus：
```
typescript
import { createApp } from &#
39;
vue&#
39;
import App from &#
39;./App.
vue&#
39;
import pinia from &#
39;./store&#
39;
import ElementPlus from &#
39;element-plus&#
39;
import &#
39;element-plus/dist/index.css&#
39;
// 引入Element Plus的暗黑主题样式
import &#
39;element-plus/theme-chalk/dark/css-vars.css&#
39;
const app = createApp
(App
)
app.use
(pinia
)
app.use
(ElementPlus
)
app.mount
(&#
39;#app&#
39;
)
```
5. 创建主题store：src/store/theme.ts
```
typescript
import { defineStore } from &#
39;pinia&#
39;
export const useThemeStore = defineStore
(&#
39;theme&#
39;, {
state:
() =>
({
isDark: false, // 默认是亮色主题
}
),
actions: {
toggleTheme
() {
this.isDark = !this.isDark
// 根据状态切换html的class，Element Plus暗黑主题依赖于&#
39;dark&#
39;类
if
(this.isDark
) {
document.documentElement.classList.add
(&#
39;dark&#
39;
)
} else {
document.documentElement.classList.remove
(&#
39;dark&#
39;
)
}
},
// 初始化主题（用于页面
加载时设置）
initTheme
() {
if
(this.isDark
) {
document.documentElement.classList.add
(&#
39;dark&#
39;
)
} else {
document.documentElement.classList.remove
(&#
39;dark&#
39;
)
}
}
},
// 持久化配置
persist: {
enabled: true,
strategies: [
{
key: &#
39;theme&#
39;, // 存储的key
storage: localStorage, // 存储在localStorage
},
],
},
}
)
```
注意：在store被创建时，持久化的数据会被恢复，但此时我们还未设置html的class，所以需要在store初始化后调用initTheme。
我们可以这样处理：在App.
vue的setup中调用themeStore.initTheme
()。
6. 创建切换主题的组件：src/components/ThemeSwitch.
vue
```
vue
<template>
<el-switch
v-model="isDark"
inline-prompt
active-color="#
333"
inactive-color="#dcdfe6"
:active-icon="Sunny"
:inactive-icon="Moon"
@change="toggleTheme"
/>
</template>
<script setup lang="ts">
import { ref, onMounted } from &#
39;
vue&#
39;
import { useThemeStore } from &#
39;../store/theme&#
39;
import { Sunny, Moon } from &#
39;@element-plus/icons-
vue&#
39;
const themeStore = useThemeStore
()
// 初始化时从store获取当前主题
const isDark = ref
(themeStore.isDark
)
// 切换主题
const toggleTheme =
() => {
themeStore.toggleTheme
()
}
// 监听store中isDark的变化，更新switch的状态
// 注意：由于持久化，store中的状态可能会被恢复，所以我们需要在组件中同步
themeStore.$subscribe
((mutation, state
) => {
isDark.value = state.isDark
}
)
</script>
```
7. 在App.
vue中
使用ThemeSwitch组件，并在初始化时设置主题：
```
vue
<template>
<div id="app">
<!-- 其他内容 -->
<ThemeSwitch />
</div>
</template>
<script setup>
import ThemeSwitch from &#
39;./components/ThemeSwitch.
vue&#
39;
import { useThemeStore } from &#
39;./store/theme&#
39;
const themeStore = useThemeStore
()
// 初始化主题（从持久化存储中读取并设置html的class）
themeStore.initTheme
()
</script>
```
8. 注意：为了暗黑主题生效，我们还需要在index.html中设置html的样式，但是通过动态添
加/删除类名已经实现。另外，确保在main.ts中引入了暗黑主题的css文件。
这样，我们就实现了主题切换，并且主题状态会被持久化保存。
可能遇到的问题：
- 如果
使用持久化插件报错，请确保安装的是最新版本，并且按照官方文档配置。
- Element Plus的暗黑主题需要引入`dark/css-vars.css`，而不是默认的css。
根据引用[
3]和[5]，我们看到持久化插件的
使用方式，所以在store中配置了persist。
以上步骤即可实现需求。
生成相关问题：
1. 如何自定义Element Plus的主题颜色（如主色）？
2. Pinia持久化存储还有哪些配置选项？
3. 在
Vue3中如何
使用Element Plus的图标？
4. 如何实现主题切换时的过渡动画？
</think>以下是如何
使用 Vite、
Vue3、Pinia、pinia-plugin-persistedstate、el-switch 和 Element Plus 实现主题颜色切换的完整方案：
---
### 实现步骤
#### 1. 创建项目并安装依赖
```bash
# 创建
Vite + Vue3 项目
npm create
vite@latest my-project -- --template
vue
cd my-project
# 安装必要依赖
npm install pinia pinia-plugin-persistedstate element-plus
npm install @element-plus/icons-
vue # EL 图标库
```
#### 2. 配置 Pinia 和持久化插件
**文件: `src/store/index.ts`**
```
typescript
import { createPinia } from &#
39;pinia&#
39;
import piniaPluginPersistedstate from &#
39;pinia-plugin-persistedstate&#
39;
const pinia = createPinia
()
pinia.use
(piniaPluginPersistedstate
) // 启用持久化插件[^1][^
3]
export default pinia
```
####
3. 创建主题状态管理 Store
**文件: `src/store/themeStore.ts`**
```
typescript
import { defineStore } from &#
39;pinia&#
39;
import { ref } from &#
39;
vue&#
39;
export const useThemeStore = defineStore
(&#
39;theme&#
39;,
() => {
const isDark = ref
(false
) // 默认亮色主题
// 切换主题并更新 DOM
const toggleTheme =
() => {
isDark.value = !isDark.value
document.documentElement.classList.toggle
(&#
39;dark&#
39;, isDark.value
)
}
return { isDark, toggleTheme }
}, {
persist: true // 启用持久化[^5]
}
)
```
#### 4. 全局配置 Element Plus 主题
**文件: `src/main.ts`**
```
typescript
import { createApp } from &#
39;
vue&#
39;
import App from &#
39;./App.
vue&#
39;
import pinia from &#
39;./store&#
39;
import ElementPlus from &#
39;element-plus&#
39;
import &#
39;element-plus/dist/index.css&#
39;
import &#
39;element-plus/theme-chalk/dark/css-vars.css&#
39; // 暗黑模式 CSS[^5]
const app = createApp
(App
)
app.use
(pinia
)
app.use
(ElementPlus
)
app.mount
(&#
39;#app&#
39;
)
```
#### 5. 创建主题切换组件
**文件: `src/components/ThemeSwitch.
vue`**
```
vue
<template>
<el-switch
v-model="isDark"
inline-prompt
:active-icon="Moon"
:inactive-icon="Sunny"
@change="toggleTheme"
/>
</template>
<script setup lang="ts">
import { Sunny, Moon } from &#
39;@element-plus/icons-
vue&#
39;
import { useThemeStore } from &#
39;@/store/themeStore&#
39;
const themeStore = useThemeStore
()
const isDark = ref
(themeStore.isDark
)
const toggleTheme =
() => {
themeStore.toggleTheme
()
}
</script>
```
#### 6. 在 App 中
使用组件
**文件: `src/App.
vue`**
```
vue
<template>
<el-config-provider :namespace="namespace">
<div class="app-container">
<h1>主题切换示例</h1>
<ThemeSwitch />
<el-button type="primary">测试按钮</el-button>
</div>
</el-config-provider>
</template>
<script setup lang="ts">
import ThemeSwitch from &#
39;@/components/ThemeSwitch.
vue&#
39;
import { computed } from &#
39;
vue&#
39;
import { useThemeStore } from &#
39;@/store/themeStore&#
39;
const themeStore = useThemeStore
()
// 动态设置命名空间避免样式冲突[^4]
const namespace = computed
(() =>
themeStore.isDark ? &#
39;el&#
39; : &#
39;el&#
39;
)
</script>
<style>
/* 亮色/暗色全局变量 */
:root { --bg-color: #ffffff; --text-color: #
30
31
33; }
.dark { --bg-color: #1d1e1f; --text-color: #e5eaf
3; }
.app-container {
background-color: var
(--bg-color
);
color: var
(--text-color
);
min-height: 100vh;
padding: 2rem;
}
</style>
```
---
### 关键技术点说明
1. **Pinia 持久化**
`pinia-plugin-persistedstate` 将主题状态自动保存到 `localStorage`，刷新后保持主题一致性[^1][^
3][^5]。
2. **Element Plus 暗黑模式**
通过动态添
加/移除 `dark` 类名触发内置暗黑样式：
```js
document.documentElement.classList.toggle
(&#
39;dark&#
39;, isDark.value
)
```
3. **样式隔离**
使用 `el-config-provider` 的 `namespace` 避免多主题样式冲突[^4]。
4. **CSS 变量**
通过自定义 CSS 变量实现全局主题色切换：
```css
:root { --primary-color: #409eff; }
.dark { --primary-color: #
337ecc; }
```
5. **响应式更新**
Pinia 的状态变更自动同步到所有组件，无需手动刷新。
---
### 效果预览
- 亮色模式：
![Light Theme]
(https://element-plus.org/images/dark-light.png
)
- 暗色模式：
![Dark Theme]
(https://element-plus.org/images/dark-light-dark.png
)
---
### 常见问题解决
1. **持久化失效**
```bash
# 卸载旧版插件
npm uninstall pinia-plugin-persist
# 安装正确插件
npm install pinia-plugin-persistedstate
```
确保 store 配置中包含 `persist: true`[^
3]。
2. **Element 样式不更新**
检查是否引入暗黑模式 CSS：
```ts
import &#
39;element-plus/theme-chalk/dark/css-vars.css&#
39;
```
3. **
Vite 热更新问题**
重启开发服务器：
```bash
npm run dev
```
---
本文详细介绍了如何配置Vue3项目，包括使用nvm管理Node.js环境，通过Vite创建项目，安装并配置vue3.x的scss/sass支持，集成Element-Plus UI框架和axios库，设置axios拦截器，以及实现axios的自动导入。此外，还探讨了pinia持久化插件的使用，并提供了练习项目的代码链接。同时，文章还涵盖了vue3整合Vant手机端开发的基础步骤，如引入Vant和进行postcss与lib-flexible的适配。
扫一扫
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
