mehta-components-vue3

mehta 自定义组件库 vue3 没有ts

一：组件目录

1. button 按钮组件

用来测试是否有效的

2: icon 图标组件

使用fortawesome组件库进行了二次封装，直接

（1）正常使用

<!-- html中使用 -->
<i class="fal fa-universal-access" />
<!-- react中使用 -->
<FontAwesomeIcon icon="fal fa-bell-on" />
<!-- vue中使用 -->
<font-awesome-icon icon="fal fa-bell-on" />

（2）封装后直接使用

<My-Icon icon="universal-access" />

二：项目使用

0: 如果你的项目有typescript，请先按照这步添加文件，如果没有typescript，请忽略此步

在src/types/mehta-components-vue3.d.ts文件中添加如下代码

declare module 'mehta-components-vue3' {
  // 在这里添加你需要的类型声明
  const content: any;
  export default content;
}

1: 安装pnpm

npm install mehta-components-vue3
yarn add mehta-components-vue3
pnpm add mehta-components-vue3

2: 引入与注册

（1） 全局注册

// 引入
import mehtaComponents from 'mehta-components-vue3'
import 'mehta-components-vue3/style.css'

const app = createApp(App)
app.use(mehtaComponents) // 注册组件

（2） 局部注册

import {MyButton MyIcon} from 'mehta-components-vue3'
import 'mehta-components-vue3/style.css'

const app = createApp(App)
app.use(MyButton, MyIcon) // 注册组件

3: 使用

<My-Button type="primary">111</My-Button>
<h1 class="row-title">普通引入</h1>
<My-Icon icon="user-secret" />
<My-Icon icon="bars" />
<My-Icon icon="shield-halved" />
<My-Icon icon="file" />
<My-Icon icon="filter" />
<My-Icon icon="gear" />
<My-Icon icon="barcode" />
<My-Icon icon="folder" />
<My-Icon icon="folder-open" />

三：项目安装

pnpm install

四：编译与热更新开发

pnpm dev

五：打包

pnpm build