qcc-components

Documents

https://ad-feiben.github.io/qcc-components/

安装依赖

$ npm install

开发

运行下面命令，用于编译样式文件

$ npm run gulp-dev

运行 dev 用于组件开发

$ npm run dev

浏览器打开 http://0.0.0.0:8080 调整样式

组件需要在 packages 中编写，样式文件单独写在 packages/theme-default/src 中

开发阶段在其他项目中引用

在本项目运行 npm link，在其他项目运行 npm link qcc-components 就可以将本项目引入到其他项目中，避免多次发布 npm

优化 svg

$ npm run svgo

将 packages/Icon/svg/*.svg 压缩优化

编译

编译前先运行 npm run svgo

$ npm run dist

因为 svg-sprite-loader 不支持服务端渲染，所以使用 dist 命令执行 build 和 build:common 同时编译两个版本。

build 编译普通版本，common 编译服务端使用的版本。

common 版本不包含 svg 图标，如果需要使用 svg 图标时，需要将文档中的 svg 标签拷贝到项目中的 HTML 模板里。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">...</svg>

若不需要两个版本，可以使用

$ npm run build
# or 
$ npm run build:common

发布到 npm

# 登录 npm 
$ npm login
 
# 将编译后的代码发布 npm 
$ npm run pub

文档

文档在 examples/docs 中编写，开发阶段可以利用文档进行调试，http://0.0.0.0:8080 打开的便是文档的项目。

发布文档

运行 npm run demo 即可，如需要修改文档仓库地址，将仓库地址替换文件中的仓库地址即可。

使用

客户端渲染使用普通版本

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 项目

require('qcc-components/common/qcc-components.common')