# 企业内部组件库WattPC-UI

**Repository Path**: ChuPiJiang/watt-pc-ui

## Basic Information

- **Project Name**: 企业内部组件库WattPC-UI
- **Description**: 瓦特（WATT）开发自用UI库，PC端 组件库， 使用Vite + Vue3 构建
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-25
- **Last Updated**: 2024-10-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# watt-pc-ui

Watt-framework 
### 介绍
瓦特（WATT）开发自用UI库，PC端内的UI组件库，只为PC端适配，尽少控制包体大小，能快速适用于watt内部产品的使用。



### 使用说明

- [x] 支持cdn
- [x] es module全局使用
- [x] 按需引入

#### CDN引用方式

暂不支持官方CDN,用户可自行上传到 `cdn` 服务器使用   

```html



```


#### 全局使用


全局引入方式，与其他的包一样进行引用

```js
import WattPCUI from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'
Vue.use(WattPCUI)
```

#### 按需引入
在vue3 中使用, 可以在.vue的页面组件或组件中使用

```vue
<script setup>
import { createApp } from 'vue'
import App from './App.vue'
import { WattUpload } from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'

const app = createApp(App)

const WattUI = { WattUpload }
Object.keys(WattUI).forEach(key => {
    app.component(key, WattUI[key])
})

app.mount('#app')
</script>
```

在vue3 中api components 方式

```vue
<template>
    <div>
        <watt-upload 
            v-model="bannerFile" 
            :bus-type="6" 
            :max-length="1" 
            :file-rules="{ width: 1280, height: 400 }" 
            media-type="image" 
            accept="image/*" />
    </div>
</template>
<script>
import { ref } from 'vue'
import { WattUpload } from 'wattpc-ui'
import 'wattpc-ui/dist/style.css'

export default {
    components: { WattUpload }
    setup() {
        const bannerFile = ref([])
        return {
            bannerFile
        }
    }
}
</script>
```

### 优化

iconfont 字体用自已的cdn（阿里不让用），减小包的体积

//static.jsvue.cn//common/css/font_3824242_44szmkjzzcn.css