Installation

1. npm install
2. npm run dev (development model)
3. npm run build (production mode, automatically generated file hash)
4. npm run doc (write doc)

test document site

http://simpleui.webzeal.cn

Examples

To Do ...

Completed

1.Button 100%

2.Icon 80% (icon 数量补充下即可)

3.grid (100%)

4.input (100%)

5.List (coding)

6.tabbar 底部菜单 (coding)

7.plus input (100%)

8.banner(coding)

9.checkbox(81%)

开发说明

可以加QQ群：332339655 参与项目开发

1. /src目录用来编写组件源码

src    这个文件夹
  --index.js
  --component
  --utils
  --styles

2. ／demo／src 用来 编写 测试代码（自己调试用的）

   运行 npm run dev 会将 ／demo／src 打包进 ／demo／dist

   运行 ／demo／dist／index.html 即可查看结果

demo  这个文件夹
--src
--dist

src
-- ...

3. 因为 ／demo／src 已经自动加载了／src 的内容

   所以你编写好组件，在 ／demo／src 中 可以直接使用的

   这些已经全部配置好了

demo
--src
----app.js

import SimpleUI from "../../src/index.js";

SimpleUI.init({
    rem:2,
    ui:750
});

Vue.use(SimpleUI);

4. ／doc 是用来编写文档用的，

   一般会由制定人来维护，可以不用管它

doc  这个文件夹
--src
--dist

src
-- ...

5. npm run build 是 等到 准备发布版本的时候才会用的

   会将 ／src 代码 打包进 ／dist 生成 simple-ui.js

dist  这个文件夹
--simple-ui.js

src
-- ...

6. less 变量 放在 /styles/default.less 中

   命名规范 @组件名_分类名_具体的名字 (全部大写)

   如: @BUTTON_DEFAULT_COLOR

   表示 button 组件 defalut 的 类型 的 color 变量

@BUTTON_DANGER: #f04134;
@BUTTON_DANGER_HOVER: #f46e65;

7. less 函数 放在 /styles/function.less 中 命名规范 驼峰

   尽可能多的描述 函数的作用 如 .tranition()

.transition(@default:all) {
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
}

8. 每个组件在/components/新建一个文件夹,以组件名 命名

并且在 /components/index.js 中 import 这个 组件 并 export

import Button from './button/button.vue';

export default {
    Button,
}

9. 请参考 ant-design 官方规范, 并做 移动端适配

10. 功能列表(初版)