# 开始

# 内部开发时使用流程

# 运行开发组件

//开发
npm i

npm run dev

//注意新增任意组件都需要在“components.json”添加对应的映射

// "button":"./src/components/button/index.js",

# 目录结构介绍

build--构建脚本
config--构建配置
dist--上线构建结果
docs--奥雅组件库文档编写[https://component-1306450192.cos-website.ap-guangzhou.myqcloud.com/]
lib--发版npm使用目类--无需关注
src--组件编码
--components--组件
----index.js--新增组件时请添加引入--同时新增一条在componets.json
--mixins--公共mixins
--styles--样式注意BEM
--styles--样式注意BEM
--views--home.vue我们编码时demo开发使用

# 文档编辑

//本地文档开发
npm run docs:dev

//线上文档生成 -- 此条忽略coding已完成持续部署
npm run docs:build

# 文档md书写方式-以button为列子

TIP

以下在根目录docs文件夹上操作,书写文档只需要关注

.vuepress/components/xx/xx.vue //用于案列书写
.vuepress/enhanceApp_origin.js //新增指令时新增指令引入
docs/component_origin //新增文档md文件，映射对应组件文档

在.vuepress/components文件夹新增对应的button文件夹并书写详细案列（结合第五条）
在.vuepress/config.js文件新增对应路由--路由映射对应组件在docs/component/Button.md的文件(参考button)
在docs/component_origin上新增对应的Button.md文件,最终通过gulp生成到对应的docs/component上
案列关于docs/component_origin/Button.md的文档详解

// :::demo====button-demo-base====使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
// 解释为： 找到.vuepress/components/button/demo-base并通过gulp做转义,同时"使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。"生成为tips

所以请注意文件命名规范，请看.vuepress/components/button案列
原则上一条属性一个demo: 如按钮"disabled",则为demo-disabled
原则上一个组件对应一个docs/component_origin的md文件如Buttom.md

# 关于样式&Icon

icon全部使用iconfont
注意命名规范与重复
style完全使用BEM规则
所有颜色等变量放于var.scss,原则上不允许添加变量在组件样式文件中（考虑主题色更改）
变量命名规则--请查看var.scss自己领会0.0

# 如何上线(可忽略)

//打包
npm run build

//发布 -- 此操作由单人负责
npm run pub
//此时根据提示输入版本号--版本号格式vx.x.x

//后可以发布到私有nexus或者npm官网

#

← AY-UI Icon 按钮 →