# vue-frame-crm

> vue components for crm system

Latest version **1.1.122** (published 2026-08-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-frame-crm
pnpm add vue-frame-crm
yarn add vue-frame-crm
bun add vue-frame-crm
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.122 |
| Published | 2026-08-12 |
| First published | 2017-11-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | samhong |
| Maintainers | samhong, qiuyinglun, npmzrs |
| Keywords | vue, vue-component |

## Links

- npm: https://www.npmjs.com/package/vue-frame-crm
- Repository: https://github.com/HongYangHT/vue-frame-crm
- Homepage: https://github.com/HongYangHT/vue-frame-crm#readme
- Issues: https://github.com/HongYangHT/vue-frame-crm/issues
- npm.io page: https://npm.io/package/vue-frame-crm

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^2.5.7
- [vuex](https://npm.io/package/vuex.md) ^2.3.1
- [wrappy](https://npm.io/package/wrappy.md) ^1.0.2
- [crypto-js](https://npm.io/package/crypto-js.md) ^3.1.9-1
- [js-base64](https://npm.io/package/js-base64.md) ^2.3.2
- [vue-router](https://npm.io/package/vue-router.md) ^2.5.1
- [aid-elements](https://npm.io/package/aid-elements.md) latest
- [query-string](https://npm.io/package/query-string.md) ^5.0.1
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [aid-taurus-desktop](https://npm.io/package/aid-taurus-desktop.md) latest

## Recent versions

- 1.1.122 (latest) — 2026-08-12
- 1.1.121 — 2026-03-20
- 1.1.120 — 2026-03-18
- 1.1.119 — 2026-03-17
- 1.1.118 — 2026-03-17
- 1.1.117 — 2025-10-29
- 1.1.116 — 2025-10-24
- 1.1.115 — 2025-10-17
- 1.1.114 — 2025-10-17
- 1.1.113 — 2025-10-17
- 1.1.112 — 2025-10-17
- 1.1.111 — 2025-10-17
- 1.1.110 — 2025-10-15
- 1.1.109 — 2025-10-14
- 1.1.108 — 2025-10-11
- … 249 more at https://npm.io/package/vue-frame-crm/versions

## README

# vue-frame-crm
> vue component for crm system
![示例](./assets/img/frame.png)

#### Install

> npm install vue-frame-crm --save || npm install vue-frame-crm@xxx --save

#### 编译和发布
1. npm run build 进行编译和打包
2. 切换到当前项目目录
3. 切换npm源到npm源（https://registry.npmjs.org/）: 只针对有自身源的情况
4. npm login
5. 修改package.json的版本号
6. npm publish

#### Useage

- frame component install

```js
/**
 * 需要将frame组件注册到Vue中
 */
/* 全局注册 */
import Vue from 'vue'
import { TFrame } from 'vue-frame-crm'
Vue.use(TFame)

/* 局部注册， */
import { TFrame } from 'vue-frame-crm'
export default {
    ...
    components: {
        TFrame
    },
    ...
}

/**
 * 在模版中使用
 */
<t-frame
    :img="img"
    :imgMin="imgMin"
    :logo-router="logoRouter"
    :authorization="authorization"
    :tag="tag"
    :count="count"
    :navs="navs"
    :instance="$cmi">
</t-frame>

export default {
    data () {
        return {
            logoRouter: { name: 'portal'},
            img: img,
            imgMin: imgMin,
            authorization: authorization,
            tag: 'CRM',
            menuList: [],
            navs: [
              {
                type: 'icon',
                icon: 'bell'
              },
              {
                type: 'dropdown',
                icon: 'account-circle',
                children: [
                  {
                    name: 'icon1'
                  },
                  {
                    name: 'icon2'
                  },
                  {
                    name: 'icon3'
                  }
                ]
              },
              {
                type: 'icon',
                icon: 'arrow-right-bold-box-outline',
                handleType: 'logout'
              }
            ],
            count: 6
        }
    }
}

```

- frame 组件的提供的参数
  - img [string]
    左上角的logo图标

  - imgMin [string]
    左上角的logo缩小图标

  - logoRouter [object]
    左上角的logo图标的路由

  - authorization [object]
    配置文件设置

  - tag [string]
    当前系统的类型，用于判断是否在本系统中跳转

  - count [number]
    右上角未读消息的个数

  - menuList
    渲染menu菜单
    {
     iconType, 一级菜单的右侧icon的type，对应的是aidesign的图标库
     menuName, 当前菜单的名称
     menuUrl, 路由url
     systemUrl, 非本系统host路由 (根据rightTag 与 tag),非本项目的链接 systemUrl + menuUrl
    }

  - activeMenu [String, Number]
    当前展开的menu

  - navs [array]
    渲染头部menu
    {
     type, 'icon'| 'dropdown' | 'avatar'
     icon, 图标icon的type，对应的是aidesign的图标库
     children, 如果是dropdown时需要提供dropdownitem
    }

```js
    navs: [
      {
        type: 'icon',
        icon: 'bell'
      },
      {
        type: 'dropdown',
        icon: 'account-circle',
        children: [
          {
            name: 'icon1'
          },
          {
            name: 'icon2'
          },
          {
            name: 'icon3'
          }
        ]
      },
      {
        type: 'icon',
        icon: 'arrow-right-bold-box-outline',
        handleType: 'logout'
      }
    ]
```
  - instance
    服务调用实例

#### http 请求注入

> 以auth2的方式，将存在sessionStorage中token注册入请求头中（传入的是axios的实例）

- 用法

```js
/**
 * httpHandle 有两个函数
 * requestInterceptor (config, authorization, tokenUri)
 * handleResponseError (error, authorization)
 * http.js 最写入
 */
import { httpHandle } from 'vue-frame-crm'
import authorization from './authorization.js'

function requestInterceptor (config) {
    ...
    let conf = httpHandle.requestInterceptor(config, authorization, authorization.tokenUri)
    return merge(config, conf)
}
```

#### route 路由注入

> 在进入路由之前判断注册

```js
/**
 * beforeEach(to, from, next, authorization, requestInstance, cb)
 * 在router.js 中写入
 */
import { route } from 'vue-frame-crm'
import authorization from './authorization.js'

router.beforeEach((to, from, next) => {
    route.beforeEach(to, from, next, authorization, http.$cmi)
})
```

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