# yzm-commons-vue

> ## 如何对接zk-commons-vue

Latest version **0.1.7** (published 2025-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install yzm-commons-vue
pnpm add yzm-commons-vue
yarn add yzm-commons-vue
bun add yzm-commons-vue
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2025-04-26 |
| First published | 2020-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 585.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Driver.Cai |
| Maintainers | czc945 |

## Links

- npm: https://www.npmjs.com/package/yzm-commons-vue
- Repository: http://122.51.110.182:8000/root/yzm-commons-vue
- npm.io page: https://npm.io/package/yzm-commons-vue

## Dependencies (3)

- [fuse.js](https://npm.io/package/fuse.js.md) ^6.4.1
- [screenfull](https://npm.io/package/screenfull.md) 5.0.2
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^6.2.0

## Recent versions

- 0.1.7 (latest) — 2025-04-26
- 0.1.6 — 2023-08-03
- 0.1.5 — 2023-07-31
- 0.1.4 — 2023-04-10
- 0.1.2 — 2020-09-05
- 0.1.1 — 2020-09-05

## README

# zk-commons-vue

## 如何对接zk-commons-vue

### 1. 安装zk-commmons-vue
```bash
yarn add zk-commons-vue
```
### 2. 配置axios请求
在宿主项目的如下路径：src\api\request.ts  
配置如下内容：
```ts
import { Requestor } from 'zk-commons-vue/src/api/requestor'
import { AxiosInstance2 } from 'zk-commons-vue/types'

const service: AxiosInstance2 = new Requestor({
  baseURL: process.env.VUE_APP_HOST_URL
} as any)
  .bindToVue()
  .getAxios()

export default service

```
### 3. 配置api请求入口文件
在宿主项目的如下路径：src\api\index.ts  
配置如下内容：
```ts
import request from './request'
import commonApi from 'zk-commons-vue/src/api'

export default {
  ...commonApi,
  // 自定义的或者要覆盖zk-commons-vue内置api的往下写
}

```

### 4. 配置main.ts项目入口文件
在宿主项目的如下路径：src\main.ts  
配置如下内容：
```ts
import Vue from 'vue'

import 'normalize.css'
import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/element-variables.scss'
import '@/assets/styles/index.scss'

import App from '@/App.vue'
import store from '@/store'
import router from '@/router'
import '@/permission'

//import Directive from '@/directive' // 指令
//import Filter from '@/filter' // 过滤器
import Directive from 'zk-commons-vue/src/directive'
import Filter from 'zk-commons-vue/src/filter'
import { i18n } from '@/utils/i18n'

Vue.use(ElementUI, { size: 'small', i18n: (key, value) => i18n.t(key, value) })

Vue.use(Directive)
Vue.use(Filter)

import { ListData, SearchForm, BaseEdit } from 'zk-commons-vue'
Vue.use(ListData)
Vue.use(SearchForm)
Vue.use(BaseEdit)

Vue.config.productionTip = false
Vue.config.devtools = process.env.NODE_ENV === 'development'

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```

## 功能启用说明
### 系统参数配置管理功能
1. 需要依赖组件：monaco-editor、monaco-editor-webpack-plugin
```bash
yarn add monaco-editor
yarn add monaco-editor-webpack-plugin
```
### Excel配置管理功能
1. 需要依赖组件：x-data-spreadsheet、less、less-loader
```bash
yarn add x-data-spreadsheet
yarn add less less-loader -D
```

## 相关规则约定
1. axios请求返回的数据，then回调里直接是有效的data数据，
无需再取一次data

---
_Source: https://npm.io/package/yzm-commons-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._