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
安装
$ 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"]
}
}
按需导入-自动导入
- 安装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
安装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
安装
$ npm install --save-dev @iconify/vue
使用
<template>
<Icon icon="mdi-light:home" />
</template>
<script setup>
import { Icon } from '@iconify/vue';
</script>