Lesson-01-Vuetify Base

We can use below commands to create vue vuetify project:

1$ vue create todo-lesson01
2$ cd todo-lesson01
3$ npm i
4$ npm run serve
5
6// add vuetify
7$ vue add vuetify
  • how to fix the tool-bar

    add app prop in tag

    1<template>
2    <v-app>
3        <v-app-bar app color="primary" dark>
4        </v-app-bar>
5    </v-app>
6</template>

    If we remove the app prop in v-app-bar, the title bar will not be fixed at the browser top line.

    That also means app prop makes conponents fixed.

    However, in current released vuetify version, the app prop is renamed to absolute prop.

  • A easy way to remember vuetify props is to see their office website.

    See: https://vuetifyjs.com/en/components/toolbars/#usage

  • To create random text in VScode,

    1<p>lorem</p>

  • Using vuetify classname to control our HtmlElement tag

    1<p class="pink lighten-4 red--text text--darken-9">lorem</p>
2// use lighten-4 to control the backgrand color,
3'4' indicates transparency, like rgba last attribute.
4// text--darken-9 to control text color transparency.

    learn more: https://vuetifyjs.com/en/styles/colors/#classes , search color in vuetify official website.

  • Using display attribute to control font-size

    1<h1 class="display-4">Massive Display</h1>
2<h1 class="display-1">Massive Display</h1>
3
4// 1-4 reprent the font-size, 4 is biggest, 1 is smallest,
51 is also bigger than original one.

    learn more: https://vuetifyjs.com/en/styles/text-and-typography/#rtl-alignment, search ‘text and typography’ in the vuetify

See the origin file, (click this link to download a copy of this file)

 1<template>
 2  <div class="home">
 3    <h1>This is an home page</h1>
 4    <p class="red white--text">
 5      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis veniam
 6      explicabo facilis sed ipsa ullam aperiam quaerat, quis accusantium odit
 7      modi molestias? Iure, et vel dolor ipsam quibusdam delectus fugiat.
 8    </p>
 9
10    <p class="pink lighten-4 red--text text--darken-9">
11      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit esse
12      nesciunt, possimus eveniet vitae dolorum ipsam commodi sequi dicta rerum
13      odio tempore fuga itaque autem aut. Minima, cum. Veniam, ipsa.
14    </p>
15    <h1 class="display-4">Massive Display</h1>
16    <h1 class="display-1">Massive Display</h1>
17    <p class="headline">This is a headline</p>
18    <p class="subheading">This is a subheading</p>
19    <p class="caption">This is a caption</p>
20  </div>
21</template>
22
23<script>
24// @ is an alias to /src
25
26export default {
27  name: "Home",
28};
29</script>