Shards Vue 入门
Shards Vue 是一款美观而现代的 Vue.js UI 工具包,包含数十个自定义的预构建组件,您可以使用它们来启动您的下一个应用程序。
该库是从头开始构建的,目标是占用空间非常小并提供易于使用且功能强大组件。
该库基于核心Shards UI 套件和Bootstrap 4,因此如果您已经熟悉 Bootstrap 4,那么在使用 Shards Vue 时您会感到非常轻松自如。
开始使用 Shards Vue 非常简单。
1.安装
首先,确保通过 npm 或 Yarn 安装库,具体取决于项目的设置方式:
$ yarn add shards-vue # Install via Yarn
$ npm install shards-vue # Or install via NPM
2. 注册
下一步是包含基本 Shards 和 Bootstrap 样式表,并在应用的入口点内注册该库。只需几行代码即可实现此目的:
import Vue from 'vue'
import ShardsVue from 'shards-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'
Vue.use(ShardsVue);
3. 您已准备好!
就这样!现在,您可以使用 Vue 模板中的 Shards Vue 构建精美的用户界面。下面是一个使用 Shards Vue 可以创建内容的非常小的示例。
<template>
<div class="main-wrapper">
<d-navbar toggleable="md" type="dark" theme="primary">
<d-container>
<d-navbar-toggle target="nav-collapse"></d-navbar-toggle>
<d-navbar-brand>
<h6 class="text-white my-auto mr-4">Shards Vue</h6>
</d-navbar-brand>
<d-collapse is-nav id="nav-collapse">
<d-navbar-nav>
<d-nav-item href="#">Home</d-nav-item>
<d-nav-item href="#">About</d-nav-item>
<d-nav-item href="#">Services</d-nav-item>
</d-navbar-nav>
</d-collapse>
<d-btn theme="white" size="sm" outline>Contact</d-btn>
</d-container>
</d-navbar>
<d-container class="py-4">
<h5 class="mb-4">Add New Post</h5>
<d-card class="w-100">
<d-card-body class="p-3">
<d-form>
<d-form-row>
<d-input class="mb-3" placeholder="Post title" />
</d-form-row>
<d-form-row>
<d-textarea class="mb-3" placeholder="Post content" :rows="6" />
</d-form-row>
<d-form-row class="justify-content-between">
<d-button size="sm" type="submit">Publish</d-button>
<d-button size="sm" outline theme="warning" class="ml-auto">Cancel</d-button>
</d-form-row>
</d-form>
</d-card-body>
</d-card>
</d-container>
</div>
</template>
<style>
.main-wrapper {
background: #f9f9f9;
min-height: 100vh;
}
</style>
最终的 UI 如下:
资源和链接
您可以点击以下几个链接来了解有关 Shards Vue 的更多信息: