fddr-ui

fddr ui组件库

创建模板

# 无依赖的组件
nr tpl name=button
nr tpl name=tree-select

TODO

• [ ] 完善文档的 属性 和 方法
• [ ] popup
• [ ] 返回顶部 backtop
• [ ] 多语言支持

安装

1. 安装
   1. 安装本地包 ni ../fddr-ui
   2. 安装依赖 ni [email protected]
   3. pnpm i [email protected] --registry https://registry.npmjs.org/
2. css 引入

• nuxt.config.ts css: ['fddr-ui/style.css']
• main.ts import 'fddr-ui/style.css'

3. 推荐按需引入 (全局引入类型提示丢失) import { FButton } from 'fddr-ui'

nuxt 全局客户端引入 (不推荐)

if (import.meta.client) { const { vueApp } = useNuxtApp() vueApp.use(FLoading) }

// or main.ts
// import 'fddr-ui/dist/style.css';
import FddrUI from 'fddr-ui'

createApp(App)
  .use(FddrUI, { isPure: true })
  .mount('#app')

const tsConfig = {
  // 类型支持: tsconfig.json -> compilerOptions
  'types': ['fddr-ui/global'],
  // css 变量支持:`CSS Variable Autocomplete` .vscode/settings.json
  'cssVariables.lookupFiles': [
    '**/*.css',
    '**/*.scss',
    '**/*.sass',
    '**/*.less',
    'node_modules/fddr-ui/dist/variables.scss'
  ],
}

组件测试用例

<h3>按钮</h3>
<f-button type="primary">提交</f-button>
<f-button type="success">确认</f-button>
<f-button type="danger">删除</f-button>
<f-button type="warning">重置</f-button>
<f-button type="default">默认</f-button>
<h3>图标</h3>
<f-icon name="ant-design:message-outlined" size="30" />
<h3>space</h3>
<f-space gap="large">
  <f-button type="primary">提交</f-button>
  <f-button type="success">确认</f-button>
  <f-button circle icon="ep:search" type="primary">圆形</f-button>
</f-space>

导出多文件入口

{
  "exports": {
    ".": {
      "import": "./dist/index.js"
    },
    "./prue": {
      "types": "./dist/prue.d.ts",
      "import": "./dist/prue.js"
    },
    "./*": [
      "./*",
      "./*.d.ts"
    ]
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*",
        "./*"
      ]
    }
  }
}

发版

git commit -am 'publish'
b
npm version patch
npm publish
同步 https://npmmirror.com/package/fddr-ui/versions?

beta 版

npm version 0.1.60-beta.6
npm publish --tag beta

element-plus 类型转换

console.log([...document.querySelector('.vp-table tbody').querySelectorAll('tr')].map(n => [...n.querySelectorAll('td')].map(n => n.textContent.trim().replace(/\s*\/\s*/g, '|').replace(/\n+/g, ''))).map(n => `/** ${n[1]} @default ${n[3]} */\n${n[0].replace(/[^\w-]/g, '').replace(/-\w/g, match => match.replace('-', '').toUpperCase())}?: ${n[2].replace(/-/g, '_').match(/\w+/)[0]}`).join('\n'))

vant类型转换

console.log(Array.from(document.querySelector('#props + table tbody').querySelectorAll('tr'))
  .map(n => n.textContent.trim().split('\t'))
  .map(n => `  /** ${n[1]} @default ${n[3]} */
  ${n[0].replace(/[^\w-]/g, '').replace(/-\w/g, match => match.replace('-', '').toUpperCase())}?: ${n[2]}`).join('\n'))

类型

/** 颜色 支持任意字符串, 特别的支持 `primary` 和 `success` */
type color = 'primary' | 'success' | (string & {})

tomwork1

mywork-1

jim 的分支

tom 的分支

popover

• button 组合组件

更新依赖

https://pnpm.io/zh/cli/update

pnpm update -i 显示过时的依赖 pnpm update 更新所有依赖项，遵守 package.json 中指定的范围 pnpm update --latest 更新所有依赖到最新版本

解决无法使用本地ui库的问题 (ni ../fddr-ui)

https://github.com/nuxt/nuxt/issues/18823

  // 添加Vite配置以允许访问外部目录
  vite: {
    server: {
      fs: {
        allow: ['/Users/hf/w/fddr-ui']
      }
    },
  },
  imports: {
    transform: {
      exclude: [/\bfddr-ui\b/]
    }
  },