# Xzx Design

## 如何开发

### 安装依赖

```bash
# pnpm安装依赖
pnpm install
```

### 创建组件

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

```bash
# 若是短杠名称，以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` 若组件存在样式，则必须导出

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

### 打包

```bash
# 打包组件
pnpm build

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


# 打包文档
pnpm build:docs
```

### <font color="orange">注意事项</font>

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

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

## 如何使用

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

```bash
# 一（推荐）：将 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 # 具体路径根据实际情况填写
```

### 在组件中按需引入

```xml
<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>
```

### 或者全局引入

```js
// 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')
```