open-index/open-npm huggingface dataset:
npm package: @pzy915/util-tools
Description: 封装常用工具方法
Author: pan
Latest version: 0.0.3

# util-tools

封装开发常用帮助方法

## 安装

`npm i @pzy915/util-tools`

## 使用示例

详见 `test 目录单元测试代码`

## LocalStorageUtil.ts, SessionStorageUtil.ts

封装SessionStorage和LocalStorage的操作

## StringUtil.ts

封装字符串的常用操作, 如判空，是否为数字等

## UrlUtil.ts

封装url常用操作, 如获取search参数, 修改当前的url等

## CacheAxiosAdapterEnhancer.ts, CancelAxiosAdapterEnhancer.ts, RetryAxiosAdapterEnhancer.ts

对axios的能力进行增强: 缓存, 取消, 重试

## 目录说明

packages: 源代码目录

test: 单元测试目录
npm package: @pzy915/vite-plugin-element-plus-theme
Description: 适用于vite项目的element-plus的静态主题插件
Author: pan
Latest version: 0.0.6

# vite-plugin-element-plus-theme

适用于 vite 项目，用于实现 element-plus 的主题静态编译，动态切换

## 适用场景

- 使用 vite 开发的项目
- ui 框架是 element plus
- 有类似主题切换的需求

| element plus 版本 | 插件版本 |
| ----------------- | -------- |
| 1.3.0-beta.10     | 0.0.5    |

## 快速创建一个主题切换的示例项目

```shell
# 安装 vite-template-cli
npm i @pzy915/vite-template-cli -g

# 通过vite-template-cli命令创建一个支持element-plus主题切换的基础项目
vite-template

# 选择如下模板，创建示例项目
> element-plus项目模板: 在vue3-element-plus模板基础上, 再加入主题切换功能

# 使用你喜欢的编辑器打开项目, 通过如下命令运行项目
npm run dev

# 运行成功之后，打开浏览
http://localhost:3000/demo/hello

# 选择 `查看ElementPlus示例`

# 点击 `切换到定制主题` 或 `切换回默认主题` 查看主题切换效果
```

## 使用方式

**主题定制**

- 项目根目录创建`themes`文件夹
- `themes`文件夹下创建主题文件,文件名(不包含后缀)既是`主题唯一标识`.如:`custom-theme.scss`
- 主题文件内容大概如下:

```scss
@forward "./common/var.scss" with (
  $colors: (
    "primary": (
      "base": #003261,
    ),
    "success": (
      "base": #21ba45,
    ),
    "warning": (
      "base": #f2711c,
    ),
    "danger": (
      "base": #db2828,
    ),
    "error": (
      "base": #db2828,
    ),
    "info": (
      "base": #42b8dd,
    ),
  ),
  $button-padding-horizontal: (
    "default": 80px,
  )
);
```

**主题切换**

```js
const codeTheme = "主题唯一标识";
const sucCall = () => {
  // TODO 实现对根节点的rerender
};
const failCall = () => {
  // TODO 实现在主题文件加载失败时的处理
};
// changeTheme 函数由主题插件自动注入
window.changeTheme(codeTheme, sucCall, failCall);
```

## 实现原理

看官方有个示例项目, 可以在开发时调整主题, 修改原理是, 根据 sass 变量值可以被覆盖的的特点, 进行主题变量值覆盖. https://github.com/element-plus/unplugin-element-plus/blob/main/examples/vite/src/styles/element/index.scss

我这个插件的实现思路, 也是使用 sass 变量值覆盖的特点.

1. 读取用户配置的主题变量覆盖文件的内容
2. 读取`/项目根目录/node_modules/element-plus/theme-chalk/src/index.scss`文件内容
3. 将 **步骤 1** 中读取的内容,追加到 **步骤 2** 的内容之前, 进行 sass 变量覆盖.
4. 使用 sass 编译最终的 sass 文件内容, 生成对应主题的 css
5. 项目中进行主题切换时, 引入不同的主题 css 即可

上面是主题样式全量打包的实现思路, 按需打包的实现思路也类似

## 特点

- 支持使用原生 sass 语法进行样式变量定制
- 次级颜色自动计算
- 根据配置的不同, 主题样式支持按需和全量两种方式打包

## 注意点

不知道从 element-plus 的哪个版本开始，element-plus 内部使用主题变量的方式已经改变，必须在主题样式引入之成功后，对根节点进行一次 rerender 才能真正实现主题切换,sucCall 的回调函数就是用来给用户自行实现根节点的 rerender 的
npm package: @pzy915/vite-plugin-vitepress-demo
Description: A vite plugin for vitepress code block demo.
Author: pan
Latest version: 1.0.0-alpha.31-3

# @pzy915/vite-plugin-vitepress-demo

> 该项目于2023年1月11日 fork自 [vite-plugin-vitepress-demo (版本:2.0.0-alpha.8)](https://github.com/yanyu-fe/vite-plugin-vitepress-demo.git), 所作的改动为:给`AntdTheme组件`(对应源代码为`src/theme/antd/index.vue`)新增了`otherSrcArr`属性，用于`非源码模式下，除了显示src对应文件的源代码外，同时也显示otherSrcArr中指定的对应文件的源代码`

对应的 `vitepress版本: 1.0.0-alpha.31`

一个基于vite的插件，用于vitepress的演示代码块。

![banner.png](https://gitee.com/free_pan/pzy915-vite-plugin-vitepress-demo/raw/master/banner.png)

![example.png](https://gitee.com/free_pan/pzy915-vite-plugin-vitepress-demo/raw/master/example.png)

如果你现在正在用vuepress，如果你也想实现类似的功能，可以尝试一下[vuepress-plugin-code-block](https://github.com/yanyu-fe/vuepress-plugins/tree/main/plugins/code-block)


## 安装

```shell
npm i @pzy915/vite-plugin-vitepress-demo -D

```


## 插件配置

当前包是一个`Pure ESM`包，确保当前项目中的`package.json`中包含`"type": "module"`。


在`vite.config.[jt]s`中做如下配置：

```ts
import { defineConfig } from 'vite'
import VitePluginVitepressDemo from '@pzy915/vite-plugin-vitepress-demo'

export default defineConfig({
  plugins: [
    VitePluginVitepressDemo(),
  ],
})
```

### 插件属性

* glob: string | string[]

  指定需要处理的文件，支持glob语法，默认为`./**/demos/*.vue`。

* base: string

  指定从哪个文件夹进行监听，默认同`vite`配置的`root`。

* exclude: string[]

  指定需要排除的文件，支持glob语法，内置：`['**/node_modules/**', '**/dist/**', '**/build/**', '**/test/**', '**/tests/**', '**/__tests__/**']`默认会排除`.vitepress`。如果你不想排除`.vitepress`那么你可以设置`exclude:[]`。

* markdown: 同`vitepress`配置的`markdown`。

### 实验性

目前对于`jsx`的支持还处于实验阶段，可能会有一些不稳定的地方

## 组件配置

在2.x版本中，我们支持了自定义组件，但是自定义组件必须和内置组件具有相同的API。

如若我们的自带的主题满足不了你们的需求，那么你可以参考我们的[默认主题](https://github.com/yanyu-fe/vite-plugin-vitepress-demo/tree/main/src/theme)自定义自己的主题。

同时也欢迎大家提交PR，让我们的主题更加完善。

### 导入组件

在.vitepress/theme/index.[jt]s中导入组件：

```ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Demo', AntdTheme)
  },
} as Theme
```


### 在markdown中使用

```md
<demo src="./demos/basic.vue" title="标题" desc="描述"></demo>
```

```md
<demo src="./demos/basic.vue"  :other-src-arr="['./demos/docs.vue']" title="标题" desc="描述"></demo>
```

```md
<demo src="./demos/basic.vue"  :otherSrcArr="['./demos/docs.vue']" title="标题" desc="描述"></demo>
```

### 源码模式

```md
<demo src="./demos/basic.vue" raw></demo>
```

> `p.s.` 源码模式下不支持`otherSrcArr`属性，即使配置了也无效


### 使用描述使用markdown渲染

在`demos/basic.vue`中：


```vue
<docs>
---
title: Test Title
---

Hello World This is Test Docs block code in `docs.vue`.

</docs>

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const msg = ref('Hello World')
</script>
```


在`markdown`中：

```md
<demo src="./demos/docs.vue"></demo>
```
npm package: @pzy915/vite-template-cli
Description: 快速生成vite项目的命令行工具
Author: pan
Latest version: 0.0.28

# vite-template-cli

一个用于快速生成 vite 项目的命令行工具

## 已支持模板

### vue3-basic: vue3 基础模板

已集成工具:

- vuex
- vue-router
- axios
- @vueuse/core
- vue-request
- eslint: 用于代码静态语法检测和格式化
- prettier: 用于代码格式化
- git-cz: 用于标准化 git commit 消息
- standard-version: 用于自动生成 changelog 以及项目的版本号升级

### vue3-element-plus: element-plus 项目模板

在 `vue3-basic` 模板基础上, 再集成 `element-plus`

### vue3-element-plus-theme: element-plus 项目模板

在 `vue3-element-plus` 模板基础上, 再加入主题切换功能

### vue3-mobile 项目模板

在 `vue3-basic` 引入 `vant`, 并做了`px to rem`配置, 适用于基于 vue3 的移动端项目

### ts-lib 项目模板

用于编写自己的 ts 组件，并可发布到`npm`中

### vue2-template 项目模板

vue2 项目模板

### vue2-element-ui 项目模板

在`vue2-template`模板的基础上，再集成`Element UI`

### vue2-vant 项目模板

在`vue2-template`模板的基础上，再集成`Vant`, 并做了`px to rem`配置, 适用于基于 vue3 的移动端项目

## 用法

安装 cli

```shell
npm i -g @pzy915/vite-template-cli
```

使用

```shell
vite-template
```