# @xysfe/actui
一套基于Vue实现的组件库

[![NPM version](https://img.shields.io/npm/v/@xysfe/actui.svg?style=flat)](https://npmjs.org/package/@xysfe/actui)

## 介绍
#### 组件名
在package.json中有个prefix字段，为必填字段。
如果指定为act,在应用中以```<act-toast></act-toast>```方式引用组件

#### 添加新组件
执行```npm run add xxx```
则会在src/components/下新建组件相应目录及文件，
~~并把组件名存入components.json文件中，以便重名的检查。~~
已经不需要components.json了

#### 开发及发布

```
npm run build
```

## 注意事项
#### 开发篇
1. 样式默认用scss开发。
2. 在src/style目录下有个index.scss文件，存放所有组件的公共样式。
3. 公共样式的引用。
组件开发：
组件在开发过程中，如果对公共样式有依赖，不需要手动import公共样式，直接使用即可。
使用组件：
如果某个组件Toast依赖公共样式，则在按需引入时，需手动import Style模块，
如下所示：```import { Style, Toast } from '@xysfe/actui'```
否则不用引入Style模块:```import { Toast } from '@xysfe/actui'```
4. 组件发射事件的命名。
一个组件需要对外抛出事件时，事件的命名全部小写：
```
//good
this.$emit("hidelayer")
//bad
this.$emit("hide-layer")
this.$emit("hideLayer")
```
#### 文档篇
1. 文档有阅读文档和可操作example两类。阅读文档放在docs/md目录下,格式为md;可操作文档放在docs/example目录下,格式为vue。
2. 阅读文档编写好之后，需手动添加路由（在docs/route/route_md.js中添加），然后把配置好的路由添加到文档菜单中（docs/components/menu.vue），重新生成文档即可访问。
3. ~~可操作文档编写好之后，需手动添加路由（在docs/route/route_example.js中添加）,然后文档最右侧的demo区域可体验每个组件。~~
4. 运行npm run docs生成文档，文档打包在dist目录下。

#### 组件开发流程
1. 基于master新建功能分支
2. 添加新组建，执行npm run add xxx
3. 增加组件文档，新建docs/md，docs/example文件，配置文档相关路由
4. 在docs/example/文件中调试组件
5. 组件开发、调试完毕后，执行npm run dist确认是否能正常编译
6. 修改package.json中的版本号，功能分支合并到master，在master执行npm run dist
7. 组件库的gitlab及npm发布(npm publish --access public)

### 注意事项
1. 深度选择器语法>>>，::v-deep: 和 /deep/已废弃，使用::v-deep()代替
2. 在Vue2中使用::v-deep
3. 在Vue2.7和Vue3中使用:deep()
4. 
### 同步上游actui的仓库
该仓库是fork自actui仓库，如果有需求，可自行同步上游仓库的代码
需注意可能会有冲突，大部分冲突都应用本仓库代码即可
```shell
git remote add upstream git@gitlab.xinhulu.com:mucfe/actui.git
git fetch upstream
git merge upstream/master
git push origin master
```
### Webpack 4 兼容性注意事项

如果使用方项目使用 webpack 4 打包，可能会遇到以下问题：

1. **re-export external 模块警告**
   - 现象：`"export 'xxx' was not found in 'package-name'`
   - 原因：webpack 4/5 存在已知 bug，无法正确处理被标记为 external 的模块的 re-export（[webpack/webpack#16440](https://github.com/webpack/webpack/issues/16440)）
   - 解决：这类警告不影响运行时，如需消除警告，应直接从源模块导入而非通过 re-export 导入

2. **ESM 格式建议**
   - 本组件库输出 `.esm.js` 格式（而非 `.mjs`），更适合打包工具使用
   - `.mjs` 是 Node.js 原生 ESM 格式，在某些打包工具中可能有解析差异

3. **ES 模块支持限制**
   - webpack 4 对 ESM 支持不完整，不支持 `exports` 字段条件导出
   - 严格 ESM 模式下，非 ESM 模块只能通过 default import 导入
   - 建议使用方项目升级到 webpack 5 以获得完整的 ESM 支持

### Todo
1. 支持主题
2. 单元测试
3. 持续迭代