diff --git a/examples/styles/markdown.scss b/examples/styles/markdown.scss index 05e397c..ecc8d3e 100644 --- a/examples/styles/markdown.scss +++ b/examples/styles/markdown.scss @@ -126,7 +126,7 @@ background: $border; clear: both; } - p > code { + p > code, li > code { font-family: Microsoft YaHei; background-color: rgba($primary, 0.1); color: $primary; diff --git a/examples/views/docs/component/specification.md b/examples/views/docs/component/specification.md index bab980f..7c6b5eb 100644 --- a/examples/views/docs/component/specification.md +++ b/examples/views/docs/component/specification.md @@ -1,3 +1,105 @@ ## 说明 -> 建设中... \ No newline at end of file +### 项目说明 + +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: '
', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来,注意引号兼容 + } + ) +} + +``` + +> 这里需要注意字符串拼接时,容易出现引号兼容问题,因此在编写.vue文件时,尽量注意不要直接在template中出现单引号 + +3. 新建一个与.js文件同名的.css文件 +4. 将本项目中对应组件的css复制到新建的.css文件中 +5. 在需要引用组件的APICloud页面通过`