介绍

YgUi简介

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

点我去UI中文文档

主体采用: 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库与默认样式表

import {YgUi} from "@xiaolxl/ygui";
import "@xiaolxl/ygui/style.css";

export default (app) => {
    app.use(YgUi)
}

3.(可选)引入scss动态修改

3.1全局引入

export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@xiaolxl/ygui/scss/Index.scss";',
            }
        }
    }
})

3.2局部引入

<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

使用注意事项

必须有此样式:

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