fluent design
u (Vuent)
Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about building Universal Windows Platform (UWP) applications.
Vuent是根据Microsoft Fluent Design创建的Vue的一组可重用UI组件，尤其是其有关构建通用Windows平台(UWP)应用程序的官方变体。
The project aims to help developers build web or UWP apps with Fluent's look'n'feel leveraging Vue as a framework for UI/view layer.
该项目旨在帮助开发人员以Fluent的外观来构建Web或UWP应用，并利用Vue作为UI /视图层的框架。
如何使用 (How to use)
快速开始 (Quickstart)
The following snippets can get you up and running with simple demo containing basic text field:
以下代码片段可帮助您启动并运行包含基本文本字段的简单演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vuent Demo</title>
<link href="https://unpkg.com/vuent/dist/vuent.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<vnt-input v-model="message" label="Text field"></vnt-input>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vuent/dist/vuent.umd.js"></script>
<script src="main.js"></script>
</div>
</body>
</html>
// main.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vuent!'
}
});npm /纱线 (npm / Yarn)
Go to your project's directory and run in terminal:
转到项目的目录并在终端中运行：
npm install vuent --save # OR yarn add vuentOnce Vuent is installed in your project, somewhere in your JavaScript code use it as follows:
一旦在项目中安装了Vuent，就可以在JavaScript代码中的某处使用它，如下所示：
import Vue from 'vue';
import Vuent from 'vuent';
Vue.use(Vuent);翻译自: https://vuejsexamples.com/vue-js-components-implementing-microsoft-fluent-design/
fluent design
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
