datafe-ui

Datafe UI

一个 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

在 SFC 中使用

直接引入（推荐）

你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。

<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 Vite Naive UI 项目

更新日志

CHANGELOG

浏览器

本地开发推荐使用 Chrome 80+ 浏览器

维护者

JieFei Duan
Email: dw_djf@163.com