Vue-Seed-UI

Vue-Seed-UI为建站平台Vue版（kcp 3.0）底层UI组件库。

技术栈为Vue 3.0 + TS。构建部分，开发环境为Vite 2.0，build基于rollup。

目前，整体组件基于element-plus封装，待公司Cars Design完成之后，切换为Cars Design。

目录结构

.
├── examples # 开发demo
│   ├── App.vue # App入口
│   ├── components # 示例公用组件
│   │   └── AppMenu.vue # 菜单组件
│   └── main.ts # 开发环境，入口文件
├── src # 源代码目录
│   ├── base # 基本组件
│   │   ├── App # App框架组件
│   │   │   ├── README.md # 组件文档，将被编译为vue组件作为该组件的demo页面
│   │   │   └── el # 基于element-plus封装的组件
│   │   │   │   └── index.vue # 组件主入口
│   │   └── README.md     # 基础组件说明
│   ├── plus # 高级物料
│   │   └── README.md # 高级物料说明
│   └── index.ts # Seed-UI主入口
├── types # TS声明文件
├── index.html # 模板文件
├── package.json # 包信息
├── components.json # 重要！！！，当前组件列表，用于生成demo页面左侧菜单
├── README.md # 开发指南
└── vite.config.ts # vite配置文件

项目流程

代码风格遵循Vue官方风格指南。

项目开发流程如下：

1. clone本代码库。git clone [email protected]:fe-technology/vue-seed-ui.git
2. 以要开发的组件名为分支名称创建开发分支，进行组件开发
3. 开发完成后，提交Merge Request
4. 在例会进过Code Review合格后，合并进master

开发指南

本地启动开发环境

启动命令

# 首次下载请install，推荐使用yarn，目前提交了yarn.lock
yarn dev
# or
npm run dev

开发环境

访问开发环境http://localhost:3000

添加新的基础组件

1. 运行yarn addComponent，按照提示输入相关信息
2. 在组件目录下的README.md文件用于该组件文档和demo的撰写。该文件会被编译为Vue组件，并作为该组件的文档和demo显示

components.json说明

components.json文件位于根目录下，用于表示当前组件列表，后期可以用于自动创建组件。

其格式说明如下：

[{
    "type": "base",  // 组件类型，base基础组件，plus高级物料
    "title": "基础组件", // title，用于左侧菜单文案
    "components": [{  // 当前类型下组件列表
        "component": "App", // 组件名
        "title": "App框架" // 组件中文名称，用于左侧菜单文案
    },{
        "component": "Button",
        "title": "Button按钮"
    }]
}]

组件格式相关说明

基本格式

组件采用Vue 3.0语法。

<template>
  <in-button v-bind="$attrs">
    <slot></slot>
  </in-button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
// 注意，需要直接引入对应组件，官网提供的按需引入方式有问题，vite/rollup不支持
// 依赖组件在组件内部单独引用，并且为每个组件设置以'In'开头的别名，方便后期API变动不大时，替换依赖库
import InButton  from 'element-plus/es/el-button/index';
// 引入对应样式，也可以引入.sass
import 'element-plus/lib/theme-chalk/el-button.css';

export default defineComponent({
  name: "SeButton",  // 所有组件名以`Se` + 组件名的格式命名
  components: {
      InButton
  },
  setup: () => {
    // do something
  },
});
</script>

表单项类组件

表单项类组件是指可以再表单Form中作为Input类组件使用的组件，因此需要支持v-model实现双向数据绑定，即要接受一个modelValue的属性，并且emit一个update:modelValue的事件。

具体示例如下：

<se-input :model-value="value" @update:modelValue="value = $event"></se-input>

demo及文档

开发demo及文档在组件目录下的README.md中书写。采用markdown-it-container自动编译demo，demo内容采用:::demo和:::包裹

:::demo demo示例，目前仅支持template内容

<el-button type="primary">按钮</el-button>

:::