fluent design_实施Microsoft Fluent Design的Vue.js组件

作者：菜鸟追梦旅行 | 2024-03-02 06:26:22

踩

fluent design vue

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 /视图层的框架。

View Documentation 查看文件

如何使用 (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 vuent

Once 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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/179451