webuy-ui

Webuy UI based on Vue.js

项目 wiki

Webuy-UI 基于 Vue.js 的移动端 UI 组件库 Webuy-UI使用文档

代码编写规范

按照ESLint代码规范（npm run lint要求通过）

开发指南

  1.新增的组件、插件都放在packages目录下，packages/index.js是所有组件、插件的导出文件，各个组件按目录名划分；
  2.样式文件统一放在 packages/0-themes/shared/components 目录下，总的入口文件是 packages/0-themes/shared/index.scss，需要在里面添加新组件样式文件引用
  3.为新增的组件添加示例，放在src目录下，其中components中放置各个组件的示例页面组件。在router/index.js和components/index.vue中添加相应的路由和入口；
  4.为新增的组件添加说明文档，放在src/docs目录下, 并在对应的文档目录css.md或js.md下加入相应目录。

发布及引用

预览页及文档系统发布流程：
  1.在master分支开发测试完成之后，执行执行npm run preview 命令,提交代码至远程仓库；
  2.预览页面地址：http://front_doc.webuyops.com/webuy-ui/index.html#/
npm发布流程：
  1.开发工作完成之后，对项目进行自测；
  2.更改package.json版本号(version)，用于发布新的版本；
  3.执行 ./build 打包脚本，完成组件库文件打包，提交代码至远程仓库；
  4.执行npm publish命令，发布新版本的npm包
  5.远程npm地址：https://www.npmjs.com/package/webuy-ui
 
引用流程：
  1.进入项目，执行npm install webuy-ui命令；
  2.项目中import组件库文件，调用Vue.use方法后，即可使用，支持全量导入以及按需导入
 
  // 全量导入
  import WebuyUI from 'webuy-ui';
 
  Vue.use(WebuyUI);
 
  // 按需导入
  import { Toast, Indicator, Backtop, ActionSheet, MessageBox, Picker, DatePicker, AwesomeDots, LoadMore, TextareaToogle, TimeTip } from 'webuy-ui';
 
  Vue.use(Toast);
  Vue.use(Indicator);
  Vue.use(Backtop);
  Vue.use(ActionSheet);
  Vue.use(MessageBox);
  Vue.use(Picker);
  Vue.use(DatePicker);
  Vue.use(AwesomeDots);
  Vue.use(LoadMore);
  Vue.use(TextareaToogle);
  Vue.use(TimeTip);

项目目录结构

.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── lib 组件目录
│   ├── index.js 组件导出文件
│   └── toast 单个组件
│       ├── index.js
│       └── src
├── package.json
├── src 示例目录
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components 示例页面组件
│   │   ├── index.vue
│   │   └── toast.vue
│   ├── docs 组件文档目录
│   │   └── toast.md
│   ├── main.js
│   └── router 示例页面路由
│       └── index.js
├── static 静态文件目录
└── test
    ├── e2e
    │   ├── custom-assertions
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    └── unit
        ├── jest.conf.js
        ├── setup.js
        └── specs

Build Setup

 
# 依赖安装 
npm install
 
# 本地预览 
npm run dev
 
# 组件库发布打包 
./build.sh
 
# 组件库预览及文档打包 
npm run preview