0.0.1-1 • Published 4 years ago
zswui-v v0.0.1-1
基于 Vue CLI 构建的 UI 组件库.实现了组件开发测试预览,组件文档,打包发布到 npm 一系列功能,详细教程请查看 wiki
使用方法
全局安装
npm install zswui-v --save
// 入口文件引入(main.js)
import zswui from "zswui-v";
import "zswui-v/lib/zswui-v.css";
Vue.use(zswui);
// 组件里使用
<Button>PLG</Button>;
按需加载
需要安装插件
babel-plugin-import
npm install babel-plugin-import --save-dev
按需使用
<template>
<div>
<Button>测试</Button>
<Input></Input>
</div>
</template>
<script>
import { Button, Input } from "zswui-v";
export default {
name: "App",
components: {
HelloWorld,
Button,
Input
},
};
</script>
引入样式
import "zswui-v/lib/zswui-v.css"
打包发布
npm run lib
npm login
npm publish
组件文档预览
npm run docs:dev
demo(文档待完善)
https://winyh.github.io/zswui-v
winyh , zswui-v 分别为 github 的 username 和仓库名
贡献代码
组件都在 packages 目录下,单个组件用单个目录存放,在 packages 目录下的 index.js 文件中集中对外抛出
可参考 button 组件
贡献代码规范请查看 wiki
参考组件库
组件库 | 说明 |
---|---|
Ant Design | 服务于企业级产品的设计体系 |
Rsuite | UI 规范参考* |
Fusion | 构建一套产品化设计系统和物料 |
Element | 基于 Vue 2.0 PC 端网站快速成型工具 |
iview | 基于 Vue.js 的高质量 UI 组件库 |
Vuetify | 偏向于扁平简洁大气风格 |
Bootstrap | 响应式,移动优先的组件库和规范 |
Material-ui | 基于 Material Design 设计系统 |
Semantic-ui | 偏向于扁平简洁大气风格 |
Grommet | 风格偏圆润 |
React-weui | 微信体系 UI 风格 |
React-grid | 布局参考样式 |
License
zswui-v is MIT licensed.