1.0.19 • Published 1 year ago
@xiaolxl/ygui v1.0.19
介绍
YgUi简介
一个可扩展,轻量化,新拟态的基于vue3的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;
}
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago