Genuine UI

优势

1. 函数式编程 快

2. vue3组件 新

3. 多数组件提供 render 配置 灵活

安装

使用 npm

npm i genuine-ui

使用你喜欢的安装工具

• yarn

yarn genuine-ui

• pnpm 推荐使用 pnpm， 他用起来真的像在用 pnpm 一样

pnpm i genuine-ui

使用

组件的使用就像喝水一样简单，只需三步

1. 引入组件

import { GButton } from 'genuine-ui';

2. 注册组件

...
export default defineComponent({
    components: {
        GButton
    }
});
...

3. 模板中使用

<template>
    <GButton type="primary" bordered>Primary</GButton>
</template>

开发

请在项目启动之前确定已经 安装了依赖

如果你想跟我一起 贡献 genuine-ui, 那么下面一些命令你可能会用到

• 启动项目

npm run start

• 如果你想写一个 UI 组件, 那么你最好

  1. 在 src 目录下创建 一个文件夹，你最好起一个 见闻知意 的组件名称, 比如你想创建一个 button 组件, 那么这个文件夹就不能叫 input

  2. 创建 index.ts 文件作为 组件入口

  3. 创建 type.ts 用于存放 接口文件

  4. 创建 index.scss 用于存放 样式文件

  5. 创建 hooks.ts 用于处理组件逻辑

• 这时候聪明的小伙伴可能就会问：如果我写好了一个组件 (假设这个组件叫 CompX) 那么我需要怎么调试它呢？

  1. 在 CompX 组件的文件夹 下创建一个 demo 文件夹

  2. 在 demo 文件夹下创建 一个 index.md 文件 (当然你也可以叫 其他什么名字，whatever，但是一定是 md 文件)

  3. 创建 ${component-property}.demo.vue 测试组件

  4. 在 index.md 中进行组件声明

     ${component-property}

  5. 项目根目录下找到 docs/router/index.ts 文件, 找到 path: '/comp' ，像下面这样进行路由注册

     {
         ...
         path: '/comp',
         children: [
             ...
             {
                 path: '/comp/modal',
                 // @ts-ignore
                 component: () => import('../../src/CompX/demo/index.md')
             },
             ...
         ]
     }

  6. 项目根目录下找到 docs\sidebar\sidebar.list.ts 文件 在左侧导航栏中进行 当前组件的 注册

  7. 用 npm run start 启动项目后 点击侧边栏即可 调试

• 生成 库 文件

npm run package-publish

如果你足够细心你就会发现 打包后的内容是两个项目. 因为库文件 commonJs 和 ES6 都必须要支持!

规范

建议使用该写法前先 阅读 什么是组合式API？

根据 组合式API的特性，我们可以将相同逻辑关注点的代码并列在一起

面对复杂的逻辑场景，这种组合方式会让代码看起来格外清晰，也更利于维护

对 代码拆解之后我们可以将它划分成几个部分

• state 变量集合 的 钩子

• apis 所需调用的逻辑函数，可用来处理业务逻辑 的 钩子

• methods 事件集合 的 钩子

• watch 监听变量 的 钩子

变量定义

/**
 * @return 变量以及修改该变量的方法
 * **/
export const useState = <T>(
    initState: T
): [Ref<T>, (value: T) => T] => {
    const state = ref<T>(initState) as Ref<T>;
    const setState = (value: T): T => {
        state.value = value;
        return value;
    }
    return [state, setState];
}

在定义一个变量的时候，建议使用 ref 函数将该变量转换成响应式，并提供修改该变量的方法, 其优势在于

1. 变量可以实时更新

2. 语义化修改变量，更方便阅读

Example

我们以一个加法器为例简单介绍该写法，并具体解释使用 Vue 和 TS 应该怎么组织代码

本示例旨在说明代码组织，请勿在意代码冗余

文件结构

count
│  index.vue
└─ hooks
        apis.ts
        methods.ts
        state.ts
        watch.ts

模板内容

<template>
    <div class="container">
        <div class="operate" @click="onClickMinus"> - </div>
        <div class="count">{{ count }}</div>
        <div class="operate" @click="onClickAdd"> + </div>
    </div>
</template>

模板渲染

...
setup () {
    const state = initState();
    const apis = initApis(state);
    const methods = initMethods(apis);

    return {
        ...state,
        ...methods
    };
}

• initState

在该函数中 声明 组件 或 其他 钩子 中可能会使用到的的 变量

我们定义并返回一个 count 变量 和 修改该变量的方法 setCount

export const initState = () => {
    const [count, setCount] = useState(0);

    return {
        count,
        setCount
    }
}

• initApis

在该函数中 声明 方法 中 可能使用到的函数 针对 业务逻辑我们需要定义两个方法 count自增 和 count自减，即 add 和 minus

export const initApis = (
    state: ReturnType<typeof initState>
) => {
    const { count, setCount } = state;

    const add = () => {
        setCount(count.value + 1);
    }

    const minus = () => {
        setCount(count.value - 1);
    }

    return {
        add,
        minus
    }
}

• initMethods

在该函数中 声明组件交互时所需的 方法 因为页面中有两个按钮 + 和 -，我们定义两个方法 onClickAdd 和 onClickMinus

export const initMethods = (
    apis: ReturnType<typeof initApis>
) => {
    const { add, minus } = apis;

    const onClickAdd = () => {
        add();
    }

    const onClickMinus = () => {
        minus();
    }

    return {
        onClickAdd,
        onClickMinus
    };
}