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 模板里。
...
若不需要两个版本,可以使用
$ 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
即可,如需要修改文档仓库地址,将仓库地址替换文件中的仓库地址即可。
使用
客户端渲染使用普通版本
// 因为 qcc-components 依赖于 element-ui, 需要将 css 文件放在 element 样式之后, 以便覆盖 element 的样式 VueVue
服务端渲染使用 common
版本,具体参考 qcc-website
项目