## 说明

### 项目说明

ZUI是则一针对APICloud开发的基于Vue的H5组件库。

#### 项目结构

```bash
├── README.md                            # 说明文件
├── babel.config.js
├── examples                             # 项目展示，相当于正常Vue项目的src
│   ├── App.vue
│   ├── assets
│   ├── components                       # 项目展示用到的组件
│   ├── main.js
│   ├── router
│   │   ├── index.js
│   │   └── routes.js                    # 静态路由配置文件
│   ├── store.js
│   ├── styles
│   └── views                            # 视图文件
│       ├── docs                         # markdown格式的页面目录
│       │   ├── component
│       │   │   ├── button.md
│       │   │   ├── cell.md
│       │   │   ├── icon.md
│       │   │   ├── specification.md
│       │   │   └── tag.md
│       │   └── guide
│       │       ├── installation.md
│       │       └── introduce.md
│       ├── layout                       # 项目的布局
│       │   ├── component.vue
│       │   ├── components
│       │   │   └── header.vue
│       │   └── default.vue
│       └── page                         # 非markdown格式的页面
│           ├── error
│           │   └── 404.vue
│           ├── index.vue
│           └── other.vue
├── package.json
├── packages
├── postcss.config.js
├── public
├── vue.config.js
└── webpack
    └── markdown-loader.js               # 对vue-cli进行markdown扩展
```

### 开发流程

ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。

> 需要注意
> * 样式使用`CSS`编写，不使用任何预编译手段。
> * 组件编写时，`禁止`出现`ES6`语法。

#### 开发步骤

新增一个组件的步骤如下：

1. 在`packages`目录下创建组件文件
2. 在`examples/views/docs/component`目录下创建对应的markdown文件
3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由
4. 编写步骤2已创建的markdown文件

编写组件markdown文件的步骤如下：

1. 编写对应组件名称，格式为 **[首字母大写的组件名] + [组件中文名]**
2. 编写组件说明
3. 编写组件不同状态下的使用方法
4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾

### APICloud应用

本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。

1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：**components/zui/button.js**
2. 编写js形式的Vue组件, 如：

```js
if (Vue) {
  Vue.component(
    'zui-button',
    {
      name: 'Button',
      // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等
      template: '<div class="zui-button" :style="style" @click="onClick">' +
        '<slot></slot>' +
      '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容
    }
  )
}

```

> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号

3. 新建一个与.js文件同名的.css文件
4. 将本项目中对应组件的css复制到新建的.css文件中
5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件

> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件