Vusui-css 样式库

安装

本节将介绍如何安装 vusui-css。

使用包管理器

# 选择一个你喜欢的包管理器

# yarn
$ yarn add @vusui/css

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

# pnpm
$ pnpm install @vusui/css

浏览器直接引入

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

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

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>

💡 提示

我们建议使用 CDN 引入 vusui-css 的用户在链接地址上锁定版本，以免将来 vusui-css 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.comopen in new window。