-
函数式编程 快
-
vue3组件 新
-
多数组件提供
render
配置 灵活
使用 npm
npm i genuine-ui
使用你喜欢的安装工具
- yarn
yarn genuine-ui
- pnpm 推荐使用
pnpm
, 他用起来真的像在用 pnpm 一样
pnpm i genuine-ui
组件的使用就像喝水一样简单,只需三步
- 引入组件
import { GButton } from 'genuine-ui';
- 注册组件
...
export default defineComponent({
components: {
GButton
}
});
...
- 模板中使用
<template>
<GButton type="primary" bordered>Primary</GButton>
</template>
请在项目启动之前确定已经 安装了依赖
如果你想跟我一起 贡献 genuine-ui, 那么下面一些命令你可能会用到
- 启动项目
npm run start
-
如果你想写一个 UI 组件, 那么你最好
-
在
src
目录下创建 一个文件夹,你最好起一个 见闻知意 的组件名称, 比如你想创建一个button
组件, 那么这个文件夹就不能叫 input -
创建
index.ts
文件作为 组件入口 -
创建
type.ts
用于存放 接口文件 -
创建
index.scss
用于存放 样式文件 -
创建
hooks.ts
用于处理组件逻辑
-
-
这时候聪明的小伙伴可能就会问:如果我写好了一个组件 (假设这个组件叫
CompX
) 那么我需要怎么调试它呢?-
在 CompX 组件的文件夹 下创建一个
demo
文件夹 -
在 demo 文件夹下创建 一个
index.md
文件 (当然你也可以叫 其他什么名字,whatever,但是一定是 md 文件) -
创建
${component-property}.demo.vue
测试组件 -
在
index.md
中进行组件声明${component-property}
-
项目根目录下找到
docs/router/index.ts
文件, 找到path: '/comp'
,像下面这样进行路由注册{ ... path: '/comp', children: [ ... { path: '/comp/modal', // @ts-ignore component: () => import('../../src/CompX/demo/index.md') }, ... ] }
-
项目根目录下找到
docs\sidebar\sidebar.list.ts
文件 在左侧导航栏中进行 当前组件的 注册 -
用
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 函数将该变量转换成响应式,并提供修改该变量的方法, 其优势在于
-
变量可以实时更新
-
语义化修改变量,更方便阅读
我们以一个加法器为例简单介绍该写法,并具体解释使用 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
};
}