更新记录

7.1.5（2022-12-04） 下载此版本

修复文档BUG

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ - - - - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

Vusui-css 样式库

免除开发者繁复的手写 CSS 样式。

【使用文档】

使用包管理器

复制代码# 选择一个你喜欢的包管理器

# yarn
$ yarn add @vusui/css

# npm
$ npm install @vusui/css --save

# pnpm
$ pnpm install @vusui/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";

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

浏览器直接引入

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

根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。

unpkg

复制代码<head>
  <!-- 引入全部样式 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/style.css" />
  <!-- 引入移动端样式 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/mobile.css" />
  <!-- 引入精简版样式 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/lite.css" />
  <!-- 引入指定样式 -->
  <link rel="stylesheet" href="//unpkg.com/@vusui/css/lib/flex.css" />
</head>

jsDelivr

复制代码<head>
  <!-- 引入全部样式 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/css/lib/style.css"
  />
  <!-- 引入移动端样式 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/css/lib/mobile.css"
  />
  <!-- 引入精简版样式 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/css/lib/lite.css"
  />
  <!-- 引入指定样式 -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@vusui/css/lib/flex.css"
  />
</head>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问