如何开始Vuetify

>本文演示了如何使用Vuetify快速构建有吸引力的交互式前端，即vue.js组件框架遵循Google的材料设计规范。 Vuetify虽然不是UX专业知识的代替，但为创建用户友好的接口提供了坚实的基础。

Vuetify提供了其他VUE.JS CSS框架（如Bootstrap-Vue）的引人注目的替代方案，特别是对于那些寻求材料设计美学的人。 材料设计的适应性可以更快地开发美丽的可用产品。 Vuetify目前是vue.js最全面的UI库，该库完全实现了材料设计。 Vuetify的关键优势：

>开源和MIT许可。

直接安装和集成。
跨浏览器的兼容性（较旧浏览器的多填充物）。
• >
免费定制的免费主题和高级主题。
• 基于CSS Flexbox的12点网格系统，用于响应式布局。 精简开发的
必不
• 强大的社区支持。
• >先决条件：v-toolbarv-navigation-drawer v-app本教程假定为高级vue.js知识。 初学者应首先通过相关资源熟悉vue.js。
• 什么是vuetify？

Vuetify是由赞助商和社区志愿者支持的开源UI图书馆。它的主动不和谐社区和频繁的更新可确保持续的支持和错误修复。 Vuetify优先考虑语义组件和道具名称，以易于使用和记忆。 它还提供预先建立的主题和布局以加速发展。

安装vuetify：

对于现有的VUE项目：

然后，在

>或中：>

在

中包括材料图标：

> 使用Vue CLI的新项目：

>为最佳构建大小选择“默认”预设。

<code class="language-bash">npm install vuetify</code>

index.js> vuetify基础知识：main.js

<code class="language-javascript">import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);</code>

组件是必不可少的，应包装所有Vuetify组件。

必须是index.html的直接孩子。

用作主要的应用程序工具栏。

<code class="language-html"><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900%7CMaterial+Icons" rel="stylesheet"></code>

>用props的自定义：

<code class="language-bash">vue create vuetify-demo
cd vuetify-demo
vue add vuetify</code>

> Vuetify组件是可以使用道具的高度自定义的。 例如，v-toolbar's app，dark和color> props控制其外观。 可以通过直接指定颜色名称（用于背景）或附加--text（用于文本颜色）来实现颜色自定义。 darken->和lighten-修饰符调整颜色强度。

网格系统：

Vuetify采用了12点Flexbox的网格系统，用于各种屏幕尺寸的响应布局。 在

v-container路由和导航： v-layout Vuetify与VUE路由器无缝集成。 v-flex和

之类的组件创建直观的导航菜单。 组件上的

支柱可以充当路由链接。

构建登录表格：

> v-navigation-drawer可以使用v-list，to，

和

组件来构建简单的登录表单。 摘要：

> Vuetify简化了视觉上吸引人和响应式Web应用程序的创建。它的材料设计依从性，广泛的组件库和易于自定义的性能使其成为vue.js开发人员的宝贵工具。 在提供快速的开发道路的同时，重要的是要记住，强大的UX设计原则仍然至关重要。 （由于长度约束而省略了FAQS部分，但可以使用提供的文本轻松重建。）

以上是如何开始Vuetify的详细内容。更多信息请关注PHP中文网其他相关文章！