eslink-ui-plus/README.md

vue3 component library, css framework

# 组件及样式库

## 说明
本项目开发分支为 `eslink-ui-plus`  
使用yarn作为包管理器  
不要使用npm

## 启动
```bash
yarn docs:dev
```

## 打包
```bash
yarn docs:build
```

## css库
- 开发文件夹  
${rootDit}/css

- 文档说明文件夹  
${rootDit}/docs/css

## ui库
- 开发文件夹  
${rootDit}/components

- 文档说明文件夹  
${rootDit}/docs/components

## 库开发流程说明

> 以下 `${name}` 指的是你创建的组件或者css模块的名称

### ui库开发流程

1. 在 `${rootDit}/css` 文件夹下创建scss文件 `${name}.scss`

2. 在 `${rootDit}/css` 中引入新建的文件

3. 在 `${rootDit}/docs/css` 中创建使用说明文档 `${name}.md`

4. 在 `${rootDit}/docs/.vuepress/menu.js` 中加入新建的md文档路径

	```js
	const cssMenu = [
	{
		text: "CSS库",
		children: [
			"/css/README.md",
			"/css/${name}.md",
		],
	},
	];
	```

### components库开发流程

1. 在 `${rootDit}/components` 文件夹下创建组件文件夹 `${name}`

	完整文件夹路径为  
	```
	components  
		├─${name}  
		│  ├─index.ts  
		│  └─index.vue  
	```

2. 在 `${rootDit}/components/index.ts` 中引入新建的组件

	```js
	import Es${name} from "./${name}";

	const components = {
		Es${name}
	};
	export default {
		...components,
		install(app) {
			Object.values(components).forEach((component) => {
				app.use(component);
			});
		},
	};
	```

3. 在 `${rootDit}/docs/components` 中创建使用说明文档 `${name}.md`

4. 在 `${rootDit}/docs/.vuepress/menu.js` 中加入新建的md文档路径

	```js
	const componentsMenu = [
		{
			text: "组件库",
			children: [
				"/components/README.md",
				"/components/${name}.md",
			],
		},
	];
	```