Commit 1dca57d9a824d23496aaa884695f6e478ec3194f
1 parent
7825cfdd
Exists in
master
更新项目开发说明
Showing
2 changed files
with
104 additions
and
2 deletions
Show diff stats
examples/styles/markdown.scss
| @@ -126,7 +126,7 @@ | @@ -126,7 +126,7 @@ | ||
| 126 | background: $border; | 126 | background: $border; |
| 127 | clear: both; | 127 | clear: both; |
| 128 | } | 128 | } |
| 129 | - p > code { | 129 | + p > code, li > code { |
| 130 | font-family: Microsoft YaHei; | 130 | font-family: Microsoft YaHei; |
| 131 | background-color: rgba($primary, 0.1); | 131 | background-color: rgba($primary, 0.1); |
| 132 | color: $primary; | 132 | color: $primary; |
examples/views/docs/component/specification.md
| 1 | ## 说明 | 1 | ## 说明 |
| 2 | 2 | ||
| 3 | -> 建设中... | ||
| 4 | \ No newline at end of file | 3 | \ No newline at end of file |
| 4 | +### 项目说明 | ||
| 5 | + | ||
| 6 | +ZUI是则一针对APICloud开发的基于Vue的H5组件库。 | ||
| 7 | + | ||
| 8 | +#### 项目结构 | ||
| 9 | + | ||
| 10 | +```bash | ||
| 11 | +├── README.md # 说明文件 | ||
| 12 | +├── babel.config.js | ||
| 13 | +├── examples # 项目展示，相当于正常Vue项目的src | ||
| 14 | +│ ├── App.vue | ||
| 15 | +│ ├── assets | ||
| 16 | +│ ├── components # 项目展示用到的组件 | ||
| 17 | +│ ├── main.js | ||
| 18 | +│ ├── router | ||
| 19 | +│ │ ├── index.js | ||
| 20 | +│ │ └── routes.js # 静态路由配置文件 | ||
| 21 | +│ ├── store.js | ||
| 22 | +│ ├── styles | ||
| 23 | +│ └── views # 视图文件 | ||
| 24 | +│ ├── docs # markdown格式的页面目录 | ||
| 25 | +│ │ ├── component | ||
| 26 | +│ │ │ ├── button.md | ||
| 27 | +│ │ │ ├── cell.md | ||
| 28 | +│ │ │ ├── icon.md | ||
| 29 | +│ │ │ ├── specification.md | ||
| 30 | +│ │ │ └── tag.md | ||
| 31 | +│ │ └── guide | ||
| 32 | +│ │ ├── installation.md | ||
| 33 | +│ │ └── introduce.md | ||
| 34 | +│ ├── layout # 项目的布局 | ||
| 35 | +│ │ ├── component.vue | ||
| 36 | +│ │ ├── components | ||
| 37 | +│ │ │ └── header.vue | ||
| 38 | +│ │ └── default.vue | ||
| 39 | +│ └── page # 非markdown格式的页面 | ||
| 40 | +│ ├── error | ||
| 41 | +│ │ └── 404.vue | ||
| 42 | +│ ├── index.vue | ||
| 43 | +│ └── other.vue | ||
| 44 | +├── package.json | ||
| 45 | +├── packages | ||
| 46 | +├── postcss.config.js | ||
| 47 | +├── public | ||
| 48 | +├── vue.config.js | ||
| 49 | +└── webpack | ||
| 50 | + └── markdown-loader.js # 对vue-cli进行markdown扩展 | ||
| 51 | +``` | ||
| 52 | + | ||
| 53 | +### 开发流程 | ||
| 54 | + | ||
| 55 | +ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。 | ||
| 56 | + | ||
| 57 | +> 需要注意 | ||
| 58 | +> * 样式使用`CSS`编写，不使用任何预编译手段。 | ||
| 59 | +> * 组件编写时，`禁止`出现`ES6`语法。 | ||
| 60 | + | ||
| 61 | +#### 开发步骤 | ||
| 62 | + | ||
| 63 | +新增一个组件的步骤如下： | ||
| 64 | + | ||
| 65 | +1. 在`packages`目录下创建组件文件 | ||
| 66 | +2. 在`examples/views/docs/component`目录下创建对应的markdown文件 | ||
| 67 | +3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由 | ||
| 68 | +4. 编写步骤2已创建的markdown文件 | ||
| 69 | + | ||
| 70 | +编写组件markdown文件的步骤如下： | ||
| 71 | + | ||
| 72 | +1. 编写对应组件名称，格式为 **[首字母大写的组件名] + [组件中文名]** | ||
| 73 | +2. 编写组件说明 | ||
| 74 | +3. 编写组件不同状态下的使用方法 | ||
| 75 | +4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾 | ||
| 76 | + | ||
| 77 | +### APICloud应用 | ||
| 78 | + | ||
| 79 | +本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。 | ||
| 80 | + | ||
| 81 | +1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：**components/zui/button.js** | ||
| 82 | +2. 编写js形式的Vue组件, 如： | ||
| 83 | + | ||
| 84 | +```js | ||
| 85 | +if (Vue) { | ||
| 86 | + Vue.component( | ||
| 87 | + 'zui-button', | ||
| 88 | + { | ||
| 89 | + name: 'Button', | ||
| 90 | + // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等 | ||
| 91 | + template: '<div class="zui-button" :style="style" @click="onClick">' + | ||
| 92 | + '<slot></slot>' + | ||
| 93 | + '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容 | ||
| 94 | + } | ||
| 95 | + ) | ||
| 96 | +} | ||
| 97 | + | ||
| 98 | +``` | ||
| 99 | + | ||
| 100 | +> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号 | ||
| 101 | + | ||
| 102 | +3. 新建一个与.js文件同名的.css文件 | ||
| 103 | +4. 将本项目中对应组件的css复制到新建的.css文件中 | ||
| 104 | +5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件 | ||
| 105 | + | ||
| 106 | +> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件 | ||
| 5 | \ No newline at end of file | 107 | \ No newline at end of file |