zi-admin 2.组件库和工具的安装及配置

站在巨人的肩膀上看世界

Element-plus

安装：直接按官网文档，好的不得了

配置国际化：直接按官网文档，好的不得了

暗黑模式

在main.ts中添加一行导入对应样式：

import 'element-plus/theme-chalk/dark/css-vars.css'

Hooks

因为我们期望的是可以切换状态的，所以，需要进一步编写Hooks：src/utils/useDark.ts

import { useDark, useToggle } from '@vueuse/core'
import { useConfigStore } from '@/stores/config'

const isDark = useDark({
  onChanged(dark: boolean) {
    const configStore = useConfigStore()
    updateHtmlDarkClass(dark)
    configStore.$patch({
      isDark: dark,
    })
  },
})

/**
 * 切换暗黑模式
 */
const toggleDark = useToggle(isDark)

export function updateHtmlDarkClass(val: boolean) {
  const htmlEl = document.getElementsByTagName('html')[0]
  if (val) {
    htmlEl.setAttribute('class', 'dark')
  } else {
    htmlEl.setAttribute('class', '')
  }
}

export { toggleDark }

切换开关组件

<template>
  <el-switch v-model="isDark" @change="toggleDark()">
    <template #inactive-action>
      <el-icon><Sunny /></el-icon>
    </template>
    <template #active-action>
      <el-icon><MoonNight /></el-icon>
    </template>
  </el-switch>
</template>

<script setup lang="ts">
import { toggleDark } from '@/utils/useDark'
// 组件双向绑定
const isDark = defineModel<boolean>()
</script>

<style scoped lang="scss"></style>

Tailwind CSS

pnpm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后在main.scss中添加

@tailwind base; 
@tailwind components; 
@tailwind utilities;

配置保存自动格式化

安装prettier-plugin-tailwindcss

pnpm install -D prettier-plugin-tailwindcss

在.prettierrc.json中添加一行：

"plugins": ["prettier-plugin-tailwindcss"]

VueUse

pnpm i @vueuse/core

pinia 持久化

安装：pnpm add pinia-plugin-persistedstate 改写pinia相关文件：

• 新建stores/index.ts文件,写入：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

• 改写main.ts：

import pinia from '@/stores'
// ...
app.use(pinia)