# qcc-components > Qcc Componentes Latest version **0.1.9** (published 2020-09-02) · MIT license · 0 weekly downloads ## Install ```sh npm install qcc-components pnpm add qcc-components yarn add qcc-components bun add qcc-components ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.9 | | Published | 2020-09-02 | | First published | 2019-05-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 6.0.0 | | Dependencies | 10 | | Unpacked size | 33.9 MB | | Known vulnerabilities | 0 (+2 in 2 direct dependencies) | | Install scripts | no | | Author | Feiben | | Maintainers | feiben | | Keywords | qcc-components, QuickCash, components, vue | ## Links - npm: https://www.npmjs.com/package/qcc-components - Repository: https://gitee.com/shirunpei/qcc-components - Issues: https://gitee.com/shirunpei/qcc-components/issues - npm.io page: https://npm.io/package/qcc-components ## Dependencies (10) - [vue](https://npm.io/package/vue.md) ^2.5.2 - [less](https://npm.io/package/less.md) ^3.9.0 - [vue-i18n](https://npm.io/package/vue-i18n.md) ^8.11.2 - [clipboard](https://npm.io/package/clipboard.md) ^2.0.6 - [element-ui](https://npm.io/package/element-ui.md) ^2.13.1 - [vue-router](https://npm.io/package/vue-router.md) ^3.0.6 - [less-loader](https://npm.io/package/less-loader.md) ^5.0.0 - [highlight.js](https://npm.io/package/highlight.js.md) ^9.15.6 - [vue-markdown-loader](https://npm.io/package/vue-markdown-loader.md) ^2.4.1 - [markdown-it-container](https://npm.io/package/markdown-it-container.md) ^2.0.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads ## Recent versions - 0.1.9 (latest) — 2020-09-02 - 0.1.8 — 2020-09-02 - 0.1.7 — 2020-04-16 - 0.1.6 — 2019-07-01 - 0.1.5 — 2019-07-01 - 0.1.4 — 2019-07-01 - 0.1.3 — 2019-07-01 - 0.1.2 — 2019-06-24 - 0.1.1 — 2019-06-22 - 0.0.12 — 2019-06-22 - 0.0.11 — 2019-06-06 - 0.0.10 — 2019-06-06 - 0.0.9 — 2019-06-05 - 0.0.8 — 2019-06-03 - 0.0.7 — 2019-06-03 - … 6 more at https://npm.io/package/qcc-components/versions ## README # qcc-components Documents https://ad-feiben.github.io/qcc-components/ ## 安装依赖 ```bash $ npm install ``` ## 开发 运行下面命令，用于编译样式文件 ```bash $ npm run gulp-dev ``` 运行 dev 用于组件开发 ```bash $ npm run dev ``` 浏览器打开 http://0.0.0.0:8080 调整样式 组件需要在 `packages` 中编写，样式文件单独写在 `packages/theme-default/src` 中 ### 开发阶段在其他项目中引用 在本项目运行 `npm link`，在其他项目运行 `npm link qcc-components` 就可以将本项目引入到其他项目中，避免多次发布 npm ## 优化 svg ```bash $ npm run svgo ``` 将 `packages/Icon/svg/*.svg` 压缩优化 ## 编译 编译前先运行 `npm run svgo` ```bash $ npm run dist ``` 因为 `svg-sprite-loader` 不支持服务端渲染，所以使用 `dist` 命令执行 `build` 和 `build:common` 同时编译两个版本。 `build` 编译普通版本，`common` 编译服务端使用的版本。 `common` 版本不包含 svg 图标，如果需要使用 svg 图标时，需要将文档中的 svg 标签拷贝到项目中的 HTML 模板里。 ```html ... ``` 若不需要两个版本，可以使用 ```bash $ npm run build # or $ npm run build:common ``` ## 发布到 npm ```bash # 登录 npm $ npm login # 将编译后的代码发布 npm $ npm run pub ``` ## 文档 文档在 `examples/docs` 中编写，开发阶段可以利用文档进行调试，http://0.0.0.0:8080 打开的便是文档的项目。 ### 发布文档 运行 `npm run demo` 即可，如需要修改文档仓库地址，将仓库地址替换文件中的仓库地址即可。 ## 使用 客户端渲染使用普通版本 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import QccComponents from 'qcc-components' // 因为 qcc-components 依赖于 element-ui, 需要将 css 文件放在 element 样式之后, 以便覆盖 element 的样式 import 'qcc-components/theme-default/index.css' Vue.use(ElementUI) Vue.use(QccComponents) ``` 服务端渲染使用 `common` 版本，具体参考 `qcc-website` 项目 ```javascript require('qcc-components/common/qcc-components.common') ``` --- _Source: https://npm.io/package/qcc-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._