vue-cli3与Vuetify（material design）

最新推荐文章于 2024-08-11 17:20:10 发布

yanmeiyan

最新推荐文章于 2024-08-11 17:20:10 发布

阅读量5.9k

点赞数

本文链接：https://blog.csdn.net/yanmeiyan/article/details/88546285

版权

本文介绍了为何选择Vuetify作为Vue的UI框架，它遵循Material Design规范并提供手工制作的组件。通过Vue CLI3快速创建项目，然后详细说明如何在现有应用中引入和配置Vuetify，包括在main.js中导入Vuetify，引入CSS文件，以及使用v-app组件。此外，还提到了不同字体大小的应用场景。

摘要由CSDN通过智能技术生成

Why Vuetify？

Vuetify 是 Vue 的语义组件框架。
Vuetify完全根据Material Design规范开发的一个UI 布局，提供vue组件，每个组件都是手工制作。

Quick start

npm install -g @vue/cli
vue --version
vue create mia-app

在这里插入图片描述

cd mia-app
npm run serve
vue ui命令以图形化界面创建和管理项目
添加Vuetify插件

如果不希望从Vue CLI安装Vuetify.js模板，可以将以下代码复制到您的index.html中

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href