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
examples/views/docs/component/specification.md
| 1 | 1 | ## 说明 |
| 2 | 2 | |
| 3 | -> 建设中... | |
| 4 | 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 | 107 | \ No newline at end of file | ... | ... |