@xiaolxl/ygui/README.md

一个可扩展，轻量化，新拟态的基于vue3的UI框架

# 介绍

### YgUi简介

一个可扩展，轻量化，新拟态的基于vue3的UI框架

[点我去UI中文文档](https://xiaolxl.github.io/YgUiDoc/)

主体采用: `vue3` + `vite2` + `sass`

项目中必须依赖: `bootstrap-icons` + `animejs`

可参考依赖：

```
"dependencies": {
    "animejs": "^3.2.1",
    "axios": "^0.27.2",
    "better-mock": "^0.3.6",
    "bootstrap-icons": "^1.9.1",
    "vue": "^3.2.37",
    "vue-router": "4.1.4",
    "vuex": "^4.0.2",
    "vuex-persister": "^1.0.0"
},
```

### 如何安装

1.安装依赖

三种安装方式都可以

```
npm install @xiaolxl/ygui
```
```
yarn install @xiaolxl/ygui
```
```
cnpm install @xiaolxl/ygui
```

2.引入UI库与默认样式表
```js
import {YgUi} from "@xiaolxl/ygui";
import "@xiaolxl/ygui/style.css";

export default (app) => {
    app.use(YgUi)
}
```
3.(可选)引入scss动态修改

3.1全局引入
```js
export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@xiaolxl/ygui/scss/Index.scss";',
            }
        }
    }
})
```
3.2局部引入
```vue
<style lang="scss" scoped>
@import "@xiaolxl/ygui/scss/Index.scss";

.block {
  @include Yu_np_block($d: 2, $r: 30px);
  position: relative;
  width: 200px;
  height: 200px;
  .block2 {
    @include position_center;
    position: absolute;
    width: 100px;
    height: 100px;
  }
}
</style>
```

### 项目使用事项

此UI框架项目目前是测试版本

### 项目作者

@B站-小李xiaolxl

### 使用注意事项

必须有此样式:

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```