CR Component Library

一个基于 Vue 3 + TypeScript 的现代化组件库。

安装

npm install cr-component-lib
# 或
yarn add cr-component-lib
# 或
pnpm add cr-component-lib

使用

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import CrComponentLib from 'cr-component-lib'
import 'cr-component-lib/dist/cr-component-lib.css'

const app = createApp(App)
app.use(CrComponentLib)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Message } from 'cr-component-lib'
import 'cr-component-lib/dist/cr-component-lib.css'

const app = createApp(App)
app.component('CrButton', Button)
app.mount('#app')

// 在组件中使用Message
import { CrMessage } from 'cr-component-lib'

// 调用方式
CrMessage.success('操作成功')

组件列表

• Button 按钮
• Collapse 折叠面板
• Icon 图标
• Message 消息提示
• Tooltip 文字提示

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

许可证

MIT

vue-component-lib
├─ 📁.vitepress
│  └─ 📁cache
├─ 📁.vscode
│  ├─ 📄extensions.json
│  └─ 📄settings.json
├─ 📁docs
│  ├─ 📁.vitepress
│  │  ├─ 📁cache
│  │  │  └─ 📁deps
│  │  │     ├─ 📄@fortawesome_fontawesome-svg-core.js
│  │  │     ├─ 📄@fortawesome_fontawesome-svg-core.js.map
│  │  │     ├─ 📄@fortawesome_free-solid-svg-icons.js
│  │  │     ├─ 📄@fortawesome_free-solid-svg-icons.js.map
│  │  │     ├─ 📄@fortawesome_vue-fontawesome.js
│  │  │     ├─ 📄@fortawesome_vue-fontawesome.js.map
│  │  │     ├─ 📄@popperjs_core.js
│  │  │     ├─ 📄@popperjs_core.js.map
│  │  │     ├─ 📄@vitepress-demo-preview_component.js
│  │  │     ├─ 📄@vitepress-demo-preview_component.js.map
│  │  │     ├─ 📄chunk-4YE7YZ73.js
│  │  │     ├─ 📄chunk-4YE7YZ73.js.map
│  │  │     ├─ 📄chunk-IA4MHOT7.js
│  │  │     ├─ 📄chunk-IA4MHOT7.js.map
│  │  │     ├─ 📄lodash-es.js
│  │  │     ├─ 📄lodash-es.js.map
│  │  │     ├─ 📄package.json
│  │  │     ├─ 📄vitepress___@vueuse_core.js
│  │  │     ├─ 📄vitepress___@vueuse_core.js.map
│  │  │     ├─ 📄vitepress___@vue_devtools-api.js
│  │  │     ├─ 📄vitepress___@vue_devtools-api.js.map
│  │  │     ├─ 📄vue.js
│  │  │     ├─ 📄vue.js.map
│  │  │     └─ 📄_metadata.json
│  │  ├─ 📁theme
│  │  │  └─ 📄index.ts
│  │  └─ 📄config.ts
│  ├─ 📁components
│  │  ├─ 📄button.md
│  │  ├─ 📄collapse.md
│  │  ├─ 📄getting-started.md
│  │  ├─ 📄icon.md
│  │  ├─ 📄index.md
│  │  ├─ 📄message.md
│  │  └─ 📄tooltip.md
│  ├─ 📁demo
│  │  ├─ 📁Button
│  │  │  ├─ 📄Basic.vue
│  │  │  ├─ 📄Disabled.vue
│  │  │  ├─ 📄Icon.vue
│  │  │  ├─ 📄Loading.vue
│  │  │  └─ 📄Size.vue
│  │  ├─ 📁Collapse
│  │  │  └─ 📁Collapse
│  │  │     ├─ 📄Accordion.vue
│  │  │     └─ 📄Basic.vue
│  │  ├─ 📁Message
│  │  │  ├─ 📄Basic.vue
│  │  │  ├─ 📄Close.vue
│  │  │  ├─ 📄CloseAll.vue
│  │  │  └─ 📄Type.vue
│  │  └─ 📁Tooltip
│  │     ├─ 📄Basic.vue
│  │     ├─ 📄Click.vue
│  │     ├─ 📄Custom.vue
│  │     ├─ 📄Manual.vue
│  │     └─ 📄Placement.vue
│  ├─ 📄api-examples.md
│  └─ 📄markdown-examples.md
├─ 📁public
│  └─ 📄favicon.ico
├─ 📁src
│  ├─ 📁assets
│  │  ├─ 📄base.css
│  │  ├─ 📄logo.svg
│  │  └─ 📄main.css
│  ├─ 📁components
│  │  ├─ 📁Button
│  │  │  ├─ 📁__test__
│  │  │  │  └─ 📄Button.test.ts
│  │  │  ├─ 📄Button.vue
│  │  │  ├─ 📄index.ts
│  │  │  ├─ 📄style.css
│  │  │  └─ 📄types.ts
│  │  ├─ 📁Collapse
│  │  │  ├─ 📁__tests__
│  │  │  │  └─ 📄Collapse.test.ts
│  │  │  ├─ 📄Collapse.vue
│  │  │  ├─ 📄CollapseItem.vue
│  │  │  ├─ 📄index.ts
│  │  │  ├─ 📄style.css
│  │  │  └─ 📄types.ts
│  │  ├─ 📁Icon
│  │  │  ├─ 📁__tests__
│  │  │  │  └─ 📄Icon.test.ts
│  │  │  ├─ 📄Icon.vue
│  │  │  ├─ 📄index.ts
│  │  │  ├─ 📄style.css
│  │  │  └─ 📄types.ts
│  │  ├─ 📁Message
│  │  │  ├─ 📁__tests__
│  │  │  │  └─ 📄Message.test.ts
│  │  │  ├─ 📄create.ts
│  │  │  ├─ 📄index.ts
│  │  │  ├─ 📄Message.vue
│  │  │  ├─ 📄style.css
│  │  │  └─ 📄types.ts
│  │  └─ 📁Tooltip
│  │     ├─ 📁__tests__
│  │     │  └─ 📄Tooltip.test.ts
│  │     ├─ 📄index.ts
│  │     ├─ 📄style.css
│  │     ├─ 📄Tooltip.vue
│  │     └─ 📄types.ts
│  ├─ 📁hooks
│  │  └─ 📄useUtilTooltip.ts
│  ├─ 📁typings
│  │  └─ 📄index.d.ts
│  ├─ 📄App.vue
│  ├─ 📄Hello.vue
│  ├─ 📄index.ts
│  └─ 📄main.ts
├─ 📁styles
│  ├─ 📄index.css
│  ├─ 📄reset.css
│  └─ 📄vars.css
├─ 📄.editorconfig
├─ 📄.eslintignore
├─ 📄.gitattributes
├─ 📄.gitignore
├─ 📄.gitignore copy
├─ 📄.prettierrc.json
├─ 📄env.d.ts
├─ 📄eslint.config.js
├─ 📄eslint.config.ts
├─ 📄index.html
├─ 📄package.json
├─ 📄pnpm-lock.yaml
├─ 📄postcss.config.cjs
├─ 📄README.md
├─ 📄tsconfig.app.json
├─ 📄tsconfig.json
├─ 📄tsconfig.node.json
├─ 📄vite.config.ts
└─ 📄vitest.config.ts