vue-cli3与Vuetify（material design）

时间 2021-01-21

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="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script> new Vue({ el: '#app' }) </script>
</body>
</html>

对于已有应用:如果想将Vuetify引入到已有项目中，您必须把它拉入您的项目的node_modules目录
- npm install vuetify --save

To use

初始化（全局使用）您要在main.js文件中引入（import）Vuetify并且告诉Vue使用它
```
import Vue from 'vue'
Vuetify from 'vuetify'
Vue.use(Vuetify)
```

还需要引入Vuetify的css文件

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

包含Material Design图标的最简单方法是在您的index.html文件中添加一个link标签（在国内，建议使用https://fonts.cat.net/替换）
```
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
</head>
```
npm run serve

Vuetify必须使用v-app组件。它应该包装您的整个应用程序，并且是许多框架功能的中心点。如果由于某种原因您不能使用这个元素，您可以通过属性和类来模仿它，只需在可用的最上层元素（不包括body）以及application application–{light|dark} 类中将data-app属性设置为true。
Font sizes
- .display-4 - Good for
- .display-3 - Good for
- .display-2 - Good for
- .display-1 - Good for
- .headline - Good for
- .title - Good for
- .subheading - Good for supporting text
- .body-2 - Regular body text with additional weight
- .body-1 - Regular body text
- .caption - Smaller size text

@vue/cli 3.x的介绍与安装

Vue UI创建项目流程