@base-web-kits/base-tools-vue

v1.3.8

Published

3 days ago

Independent Vue utilities package built from src/vue.

0High
0Medium
0Low

mescroll

base-tools vue utilities

Base Tools

Web前端团队常用工具库，包含ts、web、react、vue、uni模块。

📖 在线文档

https://gancao-web.github.io/base-tools/

🚀 快速开始

安装

按需安装即可
非ts环境和普通h5也能使用,因为所有函数已编译为es5

// 通用TS/JS模块
npm i @base-web-kits/base-tools-ts

// Web 模块
npm i @base-web-kits/base-tools-web

// Uni 模块
npm i @base-web-kits/base-tools-uni

// React 模块
npm i @base-web-kits/base-tools-react

// Vue 模块
npm i @base-web-kits/base-tools-vue

使用

// 通用TS/JS模块
import { toDayjs, getUrlParam, toMaskPhone } from '@base-web-kits/base-tools-ts';

// Web 模块
import { copyText, isPC, setCookie } from '@base-web-kits/base-tools-web';

// React 模块
import { useCountDown } from '@base-web-kits/base-tools-react';

// Vue 模块
import { useResizeObserver } from '@base-web-kits/base-tools-vue';

// Uni 模块
import { setBaseToolsConfig, chooseMedia, toPayWx } from '@base-web-kits/base-tools-uni';

setBaseToolsConfig({
  pathHome: '/pages/tabbar/home/index',
  pathLogin: '/pages/login/index',
  pathWebview: '/pages/webview/index',
  hostFile: 'https://xx.com/',
  hostIcon: 'https://xx.com/xx/',
  isTabBar: (url) => url.startsWith('/pages/tabbar/'),
  isLogin: () => useUserStore().isLogin,
  log: (level, data) => console.log({ level, data }),
});

普通h5

<!DOCTYPE html>
<html>
  <head>
    <title>Base Tools 示例</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@base-web-kits/[email protected]/dist/base-tools-ts.umd.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@base-web-kits/[email protected]/dist/base-tools-web.umd.global.js"></script>

    <script>
      // 使用 base-tools-ts 中的函数
      const { createTimeRandId, EventBus } = baseToolsTS;

      // 使用 base-tools-web 中的函数
      const { getCookie, setCookie } = baseToolsWeb;

      // 示例：创建随机ID
      const id = createTimeRandId();
      console.log('随机ID:', id);

      // 示例：使用EventBus
      const emitter = new EventBus();
      emitter.on('test', (data) => {
        console.log('收到事件:', data);
      });
      emitter.emit('test', 'Hello World!');

      // 示例：操作Cookie
      setCookie('name', 'Base Tools', 7);
      const name = getCookie('name');
      console.log('Cookie值:', name);
    </script>
  </body>
</html>

🤖 AI 智能助手 (Skill)

本项目提供了强大的 AI Skill，可让 Cursor、Trae、Claude Code 等 AI 助手深度理解 @base-web-kits 的能力，为您精准推荐最佳实践函数，并自动处理依赖安装。

安装方式

在项目根目录下执行以下命令：

npx skills add gancao-web/base-tools

验证生效

安装完成后，可以在对话框中输入以下问题进行测试。如果 AI 推荐了 @base-web-kits 下的相关包或函数，说明配置已生效。

兼容性

本工具库和相关依赖可能涉及的新特性及其最低兼容版本：

本工具库构建目标为 ES2015+。但不内置 Polyfill, 如需支持低版本浏览器, 请务必在项目中配置 Polyfill。

配置 Polyfill

需经过两步:

配置打包工具, 将ES6+代码转换为ES5。
在入口文件顶部引入 core-js 进行 Polyfill。

以 Vite 项目为例:

使用 @vitejs/plugin-legacy 插件，将ES6+代码转换为ES5。

// vite.config.ts
import legacy from '@vitejs/plugin-legacy'; // 安装命令: npm install -D @vitejs/plugin-legacy

export default {
  plugins: [
    legacy({
      // 与antd4兼容性对齐 https://4x-ant-design.antgroup.com/docs/react/introduce-cn
      // targets: ['defaults', 'not IE 11'],

      // 与vant4兼容性对齐 https://vant4.ylhtest.com/#/zh-CN/home
      // targets: ['chrome >= 51', 'android >= 5', 'ios >= 10'],

      // 与Element对齐: https://element-plus.org/zh-CN/guide/installation
      targets: ['Chrome >= 64', 'Edge >= 79', 'Firefox >= 78', 'Safari >= 12', 'not IE 11'],

      renderLegacyChunks: true, // 必须开启, 确保生成 ES5 兼容包
      modernPolyfills: false, // 关闭按需注入polyfill, 因为legacy无法全量分析项目代码间接依赖了哪些新API, 需在入口文件 main.ts 全量引入 'core-js/stable'
    }),
  ],
};

入口文件 main.ts 顶部引入 core-js/stable 进行 Polyfill

import 'core-js/stable'; // 安装命令: npm install core-js

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme