gxxhy-vue-components v0.0.36

vue 基础框架

安装

npm i gxxhy-vue-components

# 开启 pinia 数据持久化
npm i pinia
npm i pinia-use-persist

/src/main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import {usePersist} from "pinia-use-persist";

const app = createApp(App)
app.use(createPinia().use(usePersist))
app.mount('#app')

使用

/src/App.vue

<template>
  <XhyLogin></XhyLogin>
</template>

<script lang="ts">
import { XhyLogin } from "gxxhy-vue-components";
export default {
  components: {
    XhyLogin
  }
}
</script>

配置网络请求代理

/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  
  // 添加配置项 devServer
  devServer: {
    // 配置服务器代理
    proxy: {
      // 配置多个代理
      "/subsystem": { // 代理接口前缀为/apis的请求
        "target": 'http://127.0.0.1:9000/', // 对应的代理地址【注意修改为实际的服务请求地址】
        "secure": false, // 接受运行在https上，默认不接受
        "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
        "pathRewrite": { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
          // '^/subsystem': ''
        }
      },
    }
  },
  
  // 其他更多配置项
  // ...
})

注意：
配置完代理，可能需要重新执行 npm run serve 才会生效

// vite.config.ts
 
import { defineConfig } from "vite";
 
export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

注意

该 NPM 包是基于 UI 框架 ANTD 开发的，按钮等 ANTD 原组件默认文案 为英文，如需切换为中文，请参考 ANTD 官网国际化配置说明。

以下示例是 本组件切换 ANTD 为中文的配置方案：

/src/App.vue

<template>
  <a-config-provider :getPopupContainer="getPopupContainer" :locale="zhCN" :csp="{ nonce: 'YourNonceCode' }">
    <RouterView />
  </a-config-provider>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const getPopupContainer = (_el: any, dialogContext: any) => {
  if (dialogContext) {
    return dialogContext.getDialogWrap();
  }
  return document.body;
};
</script>