elsass

elsass

RCC瑞达恒组件插件库 http://rcc-plugin.surpasspass.top/#/

文件目录

examples

存放 预览示例的网站 代码

docs 存放Markdown文档，用于生成文档网站

mobile 移动端示例网站样式&入口

pc pc端示例网站样式&入口

demos 组件示例，弃用（改为通过读取Markdown分析生成对应demo）

assets 示例网站样式&js文件

packages

用来存放 组件 的代码

config

用来存放 一些配置（Markdown配置文件等）

src

npm包入口，存放样式文件&中英文文件

util

封装的内部使用的插件、js

plugins

存放插件（供外部使用，如导出）

配置

vue ui 进入vue-cli图形操作界面（vue-cli3才支持）

npm run serve:example 本地跑示例文档

npm run build 打包packages（实际使用的组件）

npm run build 打包example（文档）

新增组件

1.packages下根据格式添加组件

添加文件夹，文件夹名称为组件名称

文件夹中添加组件.vue文件和入口文件index.js

index.js格式，可以根据需要自己在install中添加其他内容（如自定义指令等）

import $组件英文名称 from $组件路径

$组件英文名称.install = function (Vue) {
  Vue.component($组件英文名称.name, $组件英文名称)
}

export default $组件英文名称

2.example中添加对应组件的文档

docs目录中添加对应的Markdown(.md)文件，格式为

# $组件英文名称 $组件中文名称
<!-- {.md} -->
---
<!-- {.md} -->
## $用法介绍
  ::: demo
  $介绍
  ```html
  $代码内容
  ```html
## Api
### Transfer props（可设置参数）
### Transfer events（可使用事件）
### Transfer slot（可嵌入模块）
:::

route中添加对应的路由配置 在nav.config.json中参考格式添加 name是对应文档的路由名称（根据这个名称去取对应的文件），path是对应文档在浏览器上的链接，isMobile指是否有对应移动端样式，desc是该文档的描述