3. Einführung von Element Plus auf Anfrage, Konfiguration und Verpackung von Pinia

---

Vorwort

Einführung von Element Plus auf Anfrage, Konfiguration und Kapselung von Pinia

---

Element plus Komponenten werden automatisch eingeführt

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

Nachdem Sie Abhängigkeiten bei Bedarf installiert und konfiguriert haben, können Sie sie direkt in der .vue-Datei verwenden und automatisch die
Alias-Konfiguration einführen.

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,
      }),
  ],
})

Fügen Sie das rote Feld hinzu

Nach dem Import und der Ausführung werden automatisch zwei Dateien generiert. Machen Sie sich darüber keine Sorgen.

Verwendung des Pinia-Pakets

Installieren Sie Pinia und

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

Erstellen Sie das Speicherverzeichnis und erstellen Sie index.ts als Exportverzeichnis.
Kapseln und erstellen Sie dann den Datenbankbenutzer, index.ts für den Export, und „types.ts“ ist der für die Daten erforderliche Typ.
Verwenden Sie die Struktur nicht direkt, wenn Sie sie verwenden , andernfalls wird die Reaktionsfähigkeit versagen.

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
}

Benutze 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>

---

Zusammenfassen