vusui css 使用，简单明了 适合后端人员 已解决

        vusui-cssopen in new window 免除开发者繁复的手写 CSS 样式，让 WEB 前端开发更简单、灵活、便捷！如果喜欢就点个 ★Staropen in new window 吧。

• 移动设备优先： vusui-css 包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持： 所有的主流浏览器都支持。
• 容易上手： 只要具备 CSS 的基础知识，就可以开始使用。
• 响应式设计： vusui-css 的响应式能够自适应于手机、平板、电脑等设备。
• 支持 uni-app： vusui-css 同时还支持 uni-app 应用

浏览器直接引入

直接通过浏览器的 HTML 标签导入 vusui-css，然后就可以使用 vusui-css 了。

        根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkgopen in new window 和 jsDelivropen in new window 举例。

#unpkg

  
  
  
  
  
  
  
  
  ...

#jsDelivr

  
  
  
  
  
  
  
  
  ...

本节将介绍如何在项目中引入 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');

#局部引入

#HTML 中使用