Datafe-ui NPM | npm.io

简介

数安云智 - 公共 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);