快速上手

如何在项目中使用 Vusui-2.x

项目结构

Vusui
  ├─ css # CSS目录
  │  │─ vusui.css # 完整版
  │  │─ vusui-lite.css # 精简版
  │  │─ vusui-icon.css # Icon图标样式
  │  └─ vusui-component.css # 组件样式
  ├─ js  # JS目录
  │  └─ vusui.js # js插件
  └─ scss # SCSS目录
     │─ vusui.scss # VusUI 所有样式文件

使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Vusui使用方法</title>
<!-- 引入vusui.css -->
<link rel="stylesheet" href="./css/vusui.css">
<!-- 引入Icon图标样式vusui-icon.css(注:如果引入了vusui-component.css无需再引入icon样式) -->
<link rel="stylesheet" href="./css/vusui-icon.css">
<!-- 引入组件样式vusui-component.css -->
<link rel="stylesheet" href="./css/vusui-component.css">
</head>
<body>
<!-- 你的HTML代码 -->
<div class="vus-container">

</div>
<!-- 引入vusui.js插件 -->
<script src="./js/vusui.js"></script>
</body>
</html>

开始使用

至此,Vusui的开发环境已经搭建完毕,现在就可以编写代码了。CSS样式和各个组件的使用方法请参阅它们各自的文档。