一个 Vue 3 组件库
数安云智 - 公共 UI 组件库 基于 Vue3、Vite、 Naive UI、TypeScript 等最新的前端技术栈开发。
- Datafe UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接
- 顺便一提，它们支持按需引入，全都可以 treeshaking
- node 和 git -项目开发环境
- Vue3 - 熟悉 Vue 基础语法
- Vite - 熟悉 vite 特性
- Naive-ui - UI 库 基本使用
-
TypeScript - 熟悉
TypeScript基本语法 - pnpm pnpm - 速度快、节省磁盘空间的软件包管理器
- Es6+ - 熟悉 es6 基本语法
- 获取项目代码
git clone http://192.168.11.201:1080/mess/datafe/common-ui.git- 安装依赖
cd common-ui
pnpm install #（如果电脑没有安装 pnpm 的，可以执行 npm install -g pnpm@next-7，node版本推荐16.x以上）- 运行
pnpm run dev- 打包
pnpm run build- 发布 npm 包
pnpm run patch # 补丁版本发布
pnpm run minor # 次版本发布
pnpm run major # 主版本发布- 下载 npm 包
pnpm install datafe-ui你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。
<template>
<s-button>按钮</s-button>
</template>
<script>
import { defineComponent } from 'vue'
import { SButton } from 'datafe-ui'
export default defineComponent({
components: {
SButton
}
})
</script>如果你可以使用 setup script，你可以用下面的方式使用组件。
<template>
<s-button>按钮</s-button>
</template>
<script setup>
import { SButton } from 'datafe-ui'
</script>失去 tree-shaking 的能力，打包有冗余代码。
import { createApp } from 'vue';
import datafe from 'datafe-ui';
const app = createApp(App);
app.use(datafe);安装后，你可以这样在 SFC 中使用全部组件。
<template>
<s-button>按钮</s-button>
</template>import { createApp } from 'vue';
import * as DatafeUI from 'datafe-ui';
const datafe = DatafeUI.create({
components: [DatafeUI.NButton],
});
const app = createApp();
app.use(datafe);- 必须使用
npm官方源进行发布，推荐使用nrm源管理器 - 该组件库仅适用于 Vue3 项目
本地开发推荐使用 Chrome 80+ 浏览器
@JieFei Duan