eslink-ui-plus

vue3 component library, css framework

Usage no npm install needed!

<script type="module">
  import eslinkUiPlus from 'https://cdn.skypack.dev/eslink-ui-plus';
</script>

README

组件及样式库

说明

本项目开发分支为 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",
            ],
        },
    ];