• Pinia
  • 引入
  • 使用
• Element Plus
  • 安装
  • 完整引入
  • Volar支持
  • 按需导入-自动导入
• unocss&Icon
  • 安装unocss
  • 安装Icon库
  • 使用
  • 动态引用图标
• Iconify
  • 安装
  • 使用

Pinia

引入

// main.ts
import { createPinia, type PiniaPluginContext } from "pinia";

const __piniaKey = '__PINIAKEY__'

type Options = {
  key?: string
}

const setStorage = (key: string, value: any): void => {
  localStorage.setItem(key, JSON.stringify(value))
}
const getStorage = (key: string) => {
  return (localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {})
}
const piniaPlugin = (options: Options) => {
  return (context: PiniaPluginContext) => {
    const { store } = context;
    const data = getStorage(`${options?.key ?? __piniaKey}-${store.$id}`)
    store.$subscribe(() => {
      setStorage(`${options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state));
    })
    return {
      ...data
    }
  }
}

const store = createPinia()
store.use(piniaPlugin({
  key: 'pinia'
}))

// ...

app.use(store)

使用

// @/stores/index.ts
import { defineStore } from "pinia";

export const useStore = defineStore('config', {
  state: () => {
    return {
        x: 1
    }
  },
  getters: {
    
  },
  actions: {
  }
})  

Element Plus

https://element-plus.org

安装

$ npm install element-plus --save

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar支持

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

按需导入-自动导入

1. 安装unplugin-vue-components 和 unplugin-auto-import

$ npm install -D unplugin-vue-components unplugin-auto-import

修改Vite配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

参考
https://element-plus.org/zh-CN/guide/installation.html
https://element-plus.org/zh-CN/guide/quickstart.html

unocss&Icon

https://icones.js.org

安装unocss

$ npm install unocss --save

// vite.config.ts
import { presetIcons } from 'unocss'
import unocss from 'unocss/vite'

export default defineConfig({
  // ...
  plugins: [
    // ...
    unocss({
      presets: [presetIcons()]
    })
  ],
})

// main.ts
import 'uno.css'

安装Icon库

以Google Material Icons图标集为例，具体可查看Icônes

$ npm install @iconify-json/ic --save

使用

<template>
<i class="i-ic-baseline-10k icon" />
</template>
<script>
.icon {
  font-size: large;
  position: absolute;
}
</script>

动态引用图标

由于unocss是按需引入，即只在使用到某种图标时才会打包进项目，所以当需要动态引用图标时需要提前引入图标，这里提供的是一种解决方案。

// App.vue
<template>
<i v-if="false" 
    i-ic-baseline-10k />
</template>

Iconify

https://icones.js.org
Iconify for Vue

安装

$ npm install --save-dev @iconify/vue

使用

<template>
<Icon icon="mdi-light:home" />
</template>
<script setup>
import { Icon } from '@iconify/vue';
</script>