Install

npm i @garymurphy/tian-ui

Quick Start

import Vue from 'vue'
import App from './App.vue'
import TianUI from 'tian-ui'
import 'tian-ui/style.css'
createApp(App).use(TianUI).mount('#app')

"scripts": {
  "dev": "vite --host", // vite 运行
  "dist": "vue-tsc --noEmit && vite build", //vite 打包
  "preview": "vite preview", // 暂未研究
  "clear-dist": "rimraf dist",//删除 dist
  "clear-build": "rimraf build",//删除 build
  "clear-node_modules": "rimraf node_modules", //删除 node_modules
  "lint": "eslint . --ext .js,.ts,.tsx,.vue",//  eslint
  "prepare": "husky install", //提交 husky 钩子初始化
  "docs:dev": "vitepress dev docs --host",//文档运行
  "docs:build": "vitepress build docs",//文档打包
  "docs:serve": "vitepress serve docs",//运行打包后的dist
  "test": "vitest",//单元测试
  "build": "node ./scripts/build.js",// ui 库打包
  "cli": "cd cli && npm run cli" // ui库目录创建
},

参考 UI 库

Naive UI

AT-UI

Vue-Blu

vue-beauty

element UI

Element Plus

layUI

ant-design-vue UI

formily UI

formkit UI

准备开发 UI 的基本目录

const sidebar = [
  {
    text: '快速开始',
    items: [
      {text: '安装',link: '/guide/install'}
      <!-- /guide/install.md -->
    ]
  },
  {
    text: '通用',
    items: [
      {text: 'Button 按钮',link: '/components/button/'},
      {text: 'Icon 图标',link: '/components/icon/'},
      {text: 'Link 文字链接',link: '/components/link/'},
      {text: 'Text 文本',link: '/components/text/'},
      {text: 'Color 色彩',link: '/components/color/'},
      {text: 'Scrollbar 滚动条',link: '/components/scrollbar/'},
    ]
  },
  {
    text: '导航',
    items: [
      {text: 'Tabs 标签页',link: '/components/tabs/'},
      { text: 'Anchor 锚点', link: '/components/anchor/' },
      { text: 'Steps 步骤条', link: '/components/steps/' },
      { text: 'Menu 导航菜单', link: '/components/menu/' },
      { text: 'Dropdown 下拉菜单', link: '/components/dropdown/' },
      { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb/' },
      { text: 'Affix 固钉', link: '/components/affix/'}
    ]
  },
  {
    text: '反馈',
    items: [
      { text: 'Modal 对话框', link: '/components/modal/' },
      { text: 'Drawer 抽屉', link: '/components/drawer/' },
      { text: 'Popover 气泡卡片', link: '/components/popover/' },
      { text: 'Alert 警告提示', link: '/components/alert/' },
      { text: 'Message 消息提示', link: '/components/message/' },
      { text: 'MessageBox 弹框', link: '/components/messageBox/' },
      { text: 'Notification 通知提醒框', link: '/components/notification/' },
      { text: 'Popconfirm  气泡确认框', link: '/components/Popconfirm /' },
      { text: 'Progress 进度条', link: '/components/progress/' },
      { text: 'Watermark 水印', link: '/components/watermark/' },
      { text: 'Spin 加载中', link: '/components/Spin/' },
      { text: 'Tour 漫游式引导', link: '/components/Tour/' },
      { text: 'FloatButton 悬浮按钮', link: '/components/FloatButton/' },
      { text: 'ConfigProvider 全局化配置', link: '/components/ConfigProvider/' },
    ]
  },
  {
    text: '数据录入',
    items: [
      {text: 'Input 输入框', link: '/components/input/' },
      { text: 'Form 表单', link: '/components/form/' },
      { text: 'AutoComplete 自动填充', link: '/components/autoComplete/' },
      { text: 'InputNumber 数字输入框', link: '/components/inputNumber/' },
      { text: 'Radio 单选框', link: '/components/radio/' },
      { text: 'Checkbox 多选框', link: '/components/checkbox/' },
      { text: 'Rate 评分', link: '/components/rate/' },
      { text: 'Select 选择器', link: '/components/select/' },
      { text: 'CascadeSelector 级联选择器', link: '/components/cascadeSelector/' },
      { text: 'Switch 开关', link: '/components/switch/' },
      { text: 'TimePicker 时间选择器', link: '/components/timePicker/' },
      { text: 'DatePicker 日期选择器', link: '/components/datePicker/' },
      { text: 'DateTimePicker 日期时间选择器', link: '/components/dateTimePicker/' },
      { text: 'Transfer 穿梭框', link: '/components/transfer/' },
      { text: 'Upload 上传', link: '/components/upload/' },
      { text: 'Slider 滑块', link: '/components/slider/' },
      { text: 'ColorPicker 颜色选择器', link: '/components/colorPicker/' }
    ]
  },
  {
    text: '数据展示',
    items: [
      { text: 'Tree 树', link: '/components/tree/' },
      { text: 'Pagination 分页', link: '/components/pagination/' },
      { text: 'Avatar 头像', link: '/components/avatar/' },
      { text: 'Card 卡片', link: '/components/card/' },
      { text: 'Carousel 走马灯', link: '/components/carousel/' },
      { text: 'Collapse 折叠面板', link: '/components/collapse/' },
      { text: 'Table 表格', link: '/components/table/' },
      { text: 'Timeline 时间轴', link: '/components/timeline/' },
      { text: 'Tag 标签', link: '/components/tag/' },
      { text: 'Badge 徽标数', link: '/components/badge/' },
      { text: 'Skeleton 骨架屏', link: '/components/skeleton/' },
      { text: 'Empty 空状态', link: '/components/empty/' },
      { text: 'Result 结果', link: '/components/result/' },
      { text: 'Image 图片', link: '/components/image/' },
      { text: 'Calendar 日历', link: '/components/calendar/' }
      { text: 'Tooltip 文字提示', link: '/components/Tooltip/' }
      { text: 'QRCode 二维码', link: '/components/QRCode/' }
      { text: 'Comment 评论', link: '/components/QRCode/' }
    ]
  },
  {
    text: '布局',
    items: [
      { text: 'Space 间距', link: '/components/space/' },
      { text: 'Container 布局', link: '/components/container/' },
      { text: 'Grid 栅格', link: '/components/Grid/' },
    ]
  }
]