快速开始

本节将介绍如何在项目中引入 vusui-css。

样式目录

每一个 CSS 文件都可以单独引入。

┌─ vusui-css
│ ├─ style.css               * 全部样式
│ ├─ mobile.css              * 移动端样式(无响应式)
│ ├─ lite.css                * 精简版样式(删减部分样式)
│ ├─ animation.css           * 动画样式
│ ├─ border.css              * 边框样式
│ ├─ color.css               * 颜色样式
│ ├─ flex.css                * flex盒子样式
│ ├─ fontsize.css            * 字体大小样式
│ ├─ height.css              * 高度样式
│ ├─ image.css               * 图片、背景图片样式
│ ├─ layout.css              * 布局样式
│ ├─ margin.css              * margin外补填充样式
│ ├─ opacity.css             * 透明度样式
│ ├─ padding.css             * padding内补填充样式
│ ├─ position.css            * position位置、定位样式
│ ├─ radius.css              * 圆角半径样式
│ ├─ reboot.css              * 样式重置
│ ├─ rotate.css              * 旋转样式
│ ├─ shadow.css              * 阴影样式
│ ├─ typography.css          * 文本排版样式
│ └─ width.css               * 宽度样式

全局引入

// main.ts
import { createApp } from 'vue';

// 引入你需要的版本

// 全部样式
import '@vusui/css/lib/style.css';

// 移动端专用样式(无响应式)
import '@vusui/css/lib/mobile.css';

// 精简版样式
import '@vusui/css/lib/lite.css';

// 指定样式
import '@vusui/css/lib/margin.css';
import '@vusui/css/lib/width.css';
// ...

const app = createApp({});
app.mount('#app');

局部引入

<script>
// 指定样式
import '@vusui/css/lib/color.css';

export default {};
</script>

HTML 中使用

<template>
  <div class="vus-bg--success">背景颜色</div>
  <div class="vus-color--success">文本颜色</div>
  <div class="vus-border--success">边框颜色</div>
</template>