微信小程序-EventChannel

前言

本文代码是基于之前文章的代码补充的，本文将给大家描述如何在vite中使用svg

安装依赖

npm i vite-svg-loader

配置

在vite.config.ts中配置svgLoader,这里我还顺便开启了server的代理，方便调试

import { ConfigEnv, UserConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';
import path from 'path';

const CWD = process.cwd();

// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {
  return {
    plugins: [
      vue(),
      svgLoader(),
    ],
    base: './',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
    server: {
      port: 8082,
      host: '0.0.0.0',
      // proxy: {
      //   '/api': 'http://127.0.0.1:3000/',
      // },
    },
  };
};

使用

home.vue导入并使用

<template>
    <div class="user-info">
        <div class="user-info-name">
            用户名：{{userStoreRef.username.value}}
        </div>
        <div class="user-info-role">
            权限：{{ userStoreRef.isAdmin.value}}
        </div>
        <div>
            svg使用：<vue-icon/>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import {useUserStore} from "@/store/index";
import VueIcon from '@/assets/vue.svg?component';

import {storeToRefs} from "pinia"
const userStore = useUserStore();
const userStoreRef = storeToRefs(userStore);
onMounted(()=>{
    userStore.setValue({
        username: 'admin',
        isAdmin: true
    })
})
</script>
<style scoped lang="less">
.user-info{
    &-name{
        color:red;
    }
    &-role{
        color:blue;
    }
}
</style>

本文就分享到这里了，封装代码我放在了我的git仓库下期再见!