frontend / zui

specification.md 3.93 KB

1ac52e8accce7e072562561f841412aaaa3d804e/examples/views/docs/guide/specification.md#">说明

1ac52e8accce7e072562561f841412aaaa3d804e/examples/views/docs/guide/specification.md#">项目说明

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

1ac52e8accce7e072562561f841412aaaa3d804e/examples/views/docs/guide/specification.md#">项目结构

├── 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扩展

1ac52e8accce7e072562561f841412aaaa3d804e/examples/views/docs/guide/specification.md#">开发流程

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

需要注意

  • 样式使用CSS编写，不使用任何预编译手段。
  • 组件编写时，禁止出现ES6语法。

1ac52e8accce7e072562561f841412aaaa3d804e/examples/views/docs/guide/specification.md#">开发步骤

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

  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组件, 如：
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中出现单引号

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

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