create-base-teek-theme/dist/template/docs/articles/05.组件/01.基础/01.组件安装.md

``` npm create base-teek-theme@latest my-first-blog ```

---

date: 2025-03-24 23:51:59
title: 组件安装
permalink: /pages/fe4521
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 组件

---






基于 Vue 3 和 Element Plus 的上传组件库。

## 安装

```bash
pnpm install liyao-vue-common
```

## 使用方法

### 全局引入

```js
import { createApp } from 'vue'
import App from './App.vue'
import liyaoVueCommon from 'liyao-vue-common'
import 'liyao-vue-common/dist/style.css'

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

然后在组件中直接使用：

```html
<template>
  <uploadCos :uploadFileApi="yourUploadFunction" />
  <uploadLocal :importFile="yourImportFunction" />
</template>
```

### 按需引入

```js
import { uploadCos, uploadLocal } from 'liyao-vue-common'
import 'liyao-vue-common/dist/style.css'
```

然后在组件中注册和使用：

```html
<script>
import { uploadCos, uploadLocal } from 'liyao-vue-common'

export default {
  components: {
    uploadCos,
    uploadLocal
  }
}
</script>

<template>
  <uploadCos :uploadFileApi="yourUploadFunction" />
  <uploadLocal :importFile="yourImportFunction" />
</template>
```