# utils

**Repository Path**: fix-the-world/utils

## Basic Information

- **Project Name**: utils
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-04
- **Last Updated**: 2025-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @fix-the-world/utils

简称ftw，ts前端工具包，包含常用css类以及ts工具方法等。

## 1.安装

```bash
pnpm i @fix-the-world/utils
// 或
yarn add @fix-the-world/utils
```

## 2.使用

### vue项目使用

main.ts文件中：

```ts
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import '@fix-the-world/utils/dist/styles/index.scss'// 引入全局样式文件

const app = createApp(App)
app.use(router)
app.mount('#app')
app.use(ftw, { storage: { prefix: 'my' } })
```

之后可以在ts文件和vue中使用bem，utils等工具方法，比如

```html
<template>
  <h1 :class="[css.bm('color', 'red')]">132</h1>
</template>
<script>
  console.log('aes:', utils.aes.encrypt('test'))
</script>

```

### ts支持

在项目的tsconfig.json中将@fix-the-world/utils相关ts声明文件加入到types中，这样可以在ts中获得类型提示

```json
{
  "compilerOptions": {
    "types": ["@fix-the-world/utils/dist/types/index", "@fix-the-world/utils/dist/types/global"]
  }
}
```

### vite配置

在vite中配置autoImport后，会将ftw的相关方法注入到ts和vue文件中

```ts
import vite from '@fix-the-world/utils/dist/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vite.autoImport()],
  css: {
    preprocessorOptions: {
      // 引入通用的全局mixin和变量
      scss: vite.scss(),
    },
  },
})
```

### 主题修改，自定义scss变量

1.新建一个scss文件，比如src/styles/index.scss，内容如下：

```scss
@forward '@fix-the-world/utils/dist/styles/reference/config.scss' with (
  $colors: (
    'red': blue,
    //你的自定义变量
  )
);
@forward '@fix-the-world/utils/dist/styles/reference/index.scss';

```

2.修改vite中全局变量以及mixins的引用

```ts
{
  css: {
    // https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/index.scss" as *;'
      }
    }
  }
}
```

## 3.工具列表

[bem](./dist/ts/bem.d.ts)
[reg](./dist/ts/reg.d.ts)
[request](./dist/ts/request.d.ts)
[validators](./dist/ts/validators.d.ts)
[utils](./dist/ts/utils.d.ts)

[通用样式大全](./dist/styles/index.css)