xzx-design

Xzx Design

如何开发

安装依赖

# pnpm安装依赖
pnpm install

创建组件

建议优先使用非短杠连接的名称，比如 button，alert

# 若是短杠名称，以a-test为例子
# 生成一个组件叫ATest，生产环境将为 XzxATest 或者 xzx-a-test，路径/packages/components/a-test
pnpm gen a-test

# 同时生成一个组件对应的a-test.scss文件，样式统一在其中处理
pnpm gen a-test --scss

# 也可以单独生成scss文件，按需执行
pnpm scss a-test

测试

在./play/src/App.vue 中测试你的组件, 测试组件，无需引入，注意该处测试需要使用组件别名，如XzxButton或xzx-button，因为是全局注册，而非按需引入

测试之前你需要手动导出你的组件，有三处需要手动导出

1. packages/components/index.ts
2. packages/xzx-design/component.ts 注意，该处带出无需使用组件别名
3. packages/theme-chalk/src/index.scss 若组件存在样式，则必须导出

# 启动测试
pnpm dev
# git提交时，会通过脚本自动执行，若非提交时的格式化使用此指令
pnpm format

打包

# 打包组件
pnpm build

# build会同时打包主题，若需要单独使用css，则执行
# 打包主题
pnpm build:theme


# 打包文档
pnpm build:docs

注意事项

会导致打包报错的几项注意事项：

• vue组件文件中不能添加 <style scoped></style> 标签更改组件样式，需要计算的样式通过:style="youStylesMap"内联写入，其余均在theme-chalk的对应组件scss文件中编写
• 组件中未使用到的变量请删除，否则会导致打包报错

如何使用

打包之后会生成dist文件夹，使用方法：

# 一（推荐）：将 dist/xzx-design 文件夹上传至git，然后通过yarn npm等工具安装，例如：
yarn add git+https://github.com/xxxx/xzx-design.git

# 二：将 dist/xzx-design 文件夹中的内容复制到需要使用的项目中，以 yarn 举例：
# 也可以重命名：yarn add xzx-design@git+https://github.com/xxxx/xzx-design.git
yarn add file:./xzx-design # 具体路径根据实际情况填写

在组件中按需引入

<template>
  <Button>按钮</Button><!--注意：按需引入时无需添加前缀，在vue3中 组件可以通过大小写，与原生html标签区别，比如Button和button-->
  <!-- <XzxButton>按钮</XzxButton> Vue3建议大写驼峰-->
</template>

<script lang="ts" setup>
import { Button } from 'xzx-design'
<!-- ❌错误引入 import { XzxButton } from 'xzx-design' -->
</script>

或者全局引入

// Vue3 为例
import { createApp } from 'vue'
import XzxDesign from 'xzx-design'
import App from './App.vue'
import 'xzx-design/theme-chalk/index.css'

const app = createApp(App)
app.use(XzxDesign).mount('#app')