abb-system-ui v0.0.13

简介

该UI主要用于简洁风格的移动端等小屏VUE前端网页项目上，采用vite+vue3进行开发。

打包上传到npm

安装

pnpm install

打包（记得版本+1）

pnpm run build:lib

切换源：

//使用npm
npm config set registry http://registry.npmjs.org
//或者使用nrm,需要安装nrm
nrm use npm

登录：

npm login

发布到npm

npm publish

开发指南

开发前，需要有基础的nodejs,npm,vite以及vue3的基础知识。

首先先安装必要的npm包

pnpm install

组件的源码在 /packages 文件夹下

组件开发文档在 /examples文件夹下

打包后的UI库在/lib文件夹下

预览

pnpm run dev

打包成组件UI库

pnpm run build:lib

打包成开发文档UI

pnpm run build:lib

使用组件

pnpm i abb-system-ui 

全局引用

//main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import AbbSystemUi from 'abb-system-ui';
import 'abb-system-ui/lib/style.css';

const app = createApp(App);

app.use(AbbSystemUi);
app.mount('#app');

env.d.ts 加入

declare module 'abb-system-ui';

局部引用方法

<script setup>
import { SystemSelect } from 'system-ui/packages/index';
</script>

<template>
	<system-select :stars-count="1000" :distance="1000" />
</template>

<style></style>

目前支持组件如下： 1. Cell 2. Cell-radio 3. Cell-check 4. Cell-groups 5. Popup 6. Button 7. Information 8. Input 9. Select 10. Icon 11. Image 12. Pincode 13. Progress 14. DateScopePicker 15. TimeInput 16. Panel