三、element plus的按需引入，pinia的配置与封装使用

---

前言

element plus的按需引入，pinia的配置与封装使用

---

element plus组件自动引入

npm install element-plus 
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

按需安装依赖并配置后可直接在.vue文件使用，自动引入
别名配置

import {
    
     defineConfig } from 'vite'

/** element plus 按需引入 */
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResover from 'unplugin-icons/resolver'
/** 路径配置 自带的path */
import {
    
     resolve } from 'path'
// 路径

// 配置快捷路径
const alias: Record<string, string> = {
    
    
  '@': resolve(__dirname, './src'),
}

export default defineConfig({
    
    
  plugins: [
    AutoImport({
    
    
        imports: ['vue', 'vue-router'],//配置后自动引入vue,vue-router函数实例
        resolvers: [ElementPlusResolver(), IconsResover({
    
     prefix: 'Icon' })],
      }),
      Components({
    
    
        resolvers: [ElementPlusResolver(), IconsResover({
    
     enabledCollections: ['eq'] })],
      }),
      Icons({
    
    
        autoInstall: true,
      }),
  ],
})

添加上，红框的地方

引入运行后会自动生成两个文件，不用管

pinia封装使用

安装pinia及

npm install pinia
npm install -D pinia-plugin-persistedstate
/**  pinia-plugin-persistedstate 
可以将 pinia 的状态持久化到本地存储中，以便在页面刷新或重新加载后保持状态的一致性。
/

创建store目录，下创建index.ts作为导出目录
再封装创建创库user ,index.ts做导出，types.ts为数据需要的类型
使用时不可直接使用结构，不然响应式会失效

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './store'
createApp(App).use(router).use(pinia).mount('#app')

index.ts

import {
    
     createPinia } from 'pinia'
//* pinia持久化数据，可以将 pinia 的状态持久化到本地存储中，以便在页面刷新或重新加载后保持状态的一致性。
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import userAppStrote from './user/index'
export {
    
     userAppStrote }

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

user/index.ts

import {
    
     defineStore } from 'pinia'
// import { userTpye } from './types'

import {
    
     ref } from 'vue'
const userAppStrote = defineStore(
  'useAppStrote',
  () => {
    
    
    const count = ref(2)
    const inis = () => {
    
    
      return count.value++
    }
    return {
    
    
      count,
      inis,
    }
  },
  {
    
    
    persist: true, // 开起持久化
  }
)

export default userAppStrote

export interface userTpye {
    
    
  count: number
}

使用pinia

<template>
  <div id="ss">{
    
    {
    
     init }}</div>
  <h2>{
    
    {
    
     init_s.count }}</h2>
  <el-button @click="init_s.inis">start</el-button>
  <HomeMode />
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue'
import {
    
     userAppStrote } from './store'
const init_s = userAppStrote()

const init = ref('asdasd')
</script>
<style lang="scss" scoped></style>

---

总结