插件库

项目结构

- docs//插件文档模块
   - router//文档路由,对应文档页面
     - coms//维护组件路由
     - tools//维护方法路由
   - components//存放组件
   - tools//存放方法
- example//插件示例模块
- packages//插件开发模块
   - coms//开发组件
   - tools//开发方法

项目分docs example packages三大模块, 模块内无需单独安装依赖,三个模块受根目录管理,可以共享根目录的依赖,也可以相互引用

//docs中如何使用packages的组件
import { FcSearch } from '@fancy-design/coms'
//docs中如何使用packages的方法
import { useComType } from '@/fancy-design/tools'

//example模块下同理

docs

vitepress搭建,书写插件库使用说明,页面展示的内容就是docs中的维护的内容

example

基础vuecli搭建, 仅供调试组件或方法使用, 在app.vue中 使用import引入,

packages

分为 coms 和 tools 两个文件夹, 按照写好的路径和格式新增, 在两个coms/src和tools/src下,都有index.ts文件, 开发完成的组件和方法要在对应文件里进行导出,

coms/src/index.ts

import FcRightMenu from './FcRightMenu'
import FcCardTip from './FcCardTip'
import FcSearch from './FcSearch'
import FcPatientCard from './FcPatientCard'
import FcTab from './FcTab'
// 用于按需导入
export { FcRightMenu, FcCardTip, FcSearch, FcPatientCard , FcTab}

// 支持全局安装
export default {
  install(app) {
    // 全局注册组件
    app.component('FcRightMenu', FcRightMenu)
    app.component('FcCardTip', FcCardTip)
    app.component('FcSearch', FcSearch)
    app.component('FcPatientCard', FcPatientCard)
    app.component('FcTab', FcTab)
    
  }
}

tools/src/index.ts

import useBackIndex from "./useBackIndex"
import useComType from "./useComType"
import { useTransDict } from "./useTtansDict"

// 用于按需导入
export { useBackIndex, useComType, useTransDict }

开发流程

在packages对应目录下开发插件 → 在example引入调试和预览 → 在docs中按照规范书写插件使用说明 → 打包docs后部署并提交git → 发包

常用指令

{
    "dev": "vite example",
    "build:coms": "cd packages/coms && npm run build",
    "build:tools": "cd packages/tools && npm run build",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
}

• dev 运行example模块
• build:coms 打包组件库
• build:tools 打包方法库
• docs:dev 运行docs模块开发环境
• docs:build打包docs模块并自动部署

其他

调试完成,书写完使用说明后提交git, 打包和发包可以找相关负责人 使用git分支开发,不要影响主分支其他插件的使用