eslink-ui-plus

组件及样式库

说明

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

启动

yarn docs:dev

打包

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文档路径

   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 中引入新建的组件

   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文档路径

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