# cyan-ui

> 一个组件库

Latest version **0.1.4** (published 2022-04-13) · 0 weekly downloads

## Install

```sh
npm install cyan-ui
pnpm add cyan-ui
yarn add cyan-ui
bun add cyan-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-04-13 |
| First published | 2022-04-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gazer_s |

## Links

- npm: https://www.npmjs.com/package/cyan-ui
- npm.io page: https://npm.io/package/cyan-ui

## Dependencies (7)

- [vant](https://npm.io/package/vant.md) ^2.12.29
- [webpack](https://npm.io/package/webpack.md) ^4.39.2
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.6
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.7
- [async-validator](https://npm.io/package/async-validator.md) ^3.0.4
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.6
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.1.2

## Recent versions

- 0.1.4 (latest) — 2022-04-13
- 0.1.3 — 2022-04-13

## README

# cyan-ui

webpack4 打包工具 + vue2.x 框架

- [x] 开发环境本地调试组件
- [x] 按需引入
- [x] 组件 prop 文档 vuese 自动生成对应 md
- [x] 单元测试 mocha + karma + vue-test-utils + karma-coverage
- [x] 代码格式化 prettier + eslint
- [x] git 提交校验 husky6 + lint-staged + commitlint + commitizen + editorconfig
- [x] typescript 文件和 vue 文件的 ts 写法
- [x] 可通过命令行自动添加新组件相关文件和修改 src/index 内容

## :beers: 使用

安装地址

```sh
yarn add cyan-ui
```

:running: 本地调试组件库

```sh
#本地调试样式和查看足见说明文档
yarn docs:dev

#构建完成后本地调试组件
yarn link
```

本地调试其他项目使用该项目

```sh
#本地使用该组件库的其他项目
yarn link cyan-ui
```

:heavy_exclamation_mark: 如果项目 link 后，import 报 undefined，就需要设置 webpack.chainWebpack

```js
config.resolve.set('symlinks', false)
```

:rocket: 使用组件库

```js
全量加载：
import CyanUI from "cyan-ui"
import "cyan-ui/lib/styles/cyan-ui.css"

Vue.use(CyanUI)

按需加载：
安装babel-plugin-component插件
在babel.config.js/babel.config.json/.babelrc 等文件中添加这几行代码，

plugins: [
    [
      "component",
      {
        libraryName: "cyan-ui",
        libDir: "lib",
        styleLibrary: {
          name: "styles",
          base: false, // no base.css file
          path: "[module].css"
        }
      }
    ]
  ]

// main.js
import Vue from "Vue"
import {Button,Notice,SearchItem} from "cyan-ui"

// 普通vue组件引入方法
var arr = [Button,SearchItem]
// 之前项目用vue2+ts写的vue继承组件，返回的是Vue实例的类，无法直接获取name，需要写这个方法判断是继承的类或者是对象，并且由于按需加载的模块babel插件解析的问题，自定义的函数貌似无法直接调用这个引入的接口需要新的变量存储
function registComponent(com, Vue) {
  var name = (com.extendOptions && com.extendOptions.name) || com.name
  Vue.component(name, com)
}

arr.forEach(v => {
  registComponent(v, Vue)
})
----------------
// 动态组件引入方法
Vue.use(Notice)
```

---

:hammer: 项目开发相关

```sh
yarn docs:dev
```

然后点击进页面的开发说明页面查看组件开发说明

:factory:​ 构建组件库

```js
构建组件库 yarn dist
```

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