Back to contents of Vuetify

Make Vuetify 2.0 project by vue-cli

This document is an updated version of [Vuetify01](Make Vuetify 2.0 project by vue-cli) which described with old version vue-cli. In this document, I'm using latest version vue-cli 4 at that time.

Setup Vue SPA project with vue-cli

update vue-cli

$ sudo npm install -g @vue/cli

$ vue --version
@vue/cli 4.2.2

cleate project

$ vue create ml_register

Select default

Vue CLI v4.2.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

After a few minutes, Vue project creation will be completed.

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project ml_register.
👉  Get started with the following commands:

 $ cd ml_register
 $ npm run serve

Move to created project folder.

$ cd ml_register/

Add router to the project

Add router

vue add router


📦  Installing @vue/cli-plugin-router...

+ @vue/cli-plugin-router@4.2.2
updated 1 package and audited 24881 packages in 20.5s
found 0 vulnerabilities

✔  Successfully installed plugin: @vue/cli-plugin-router

Use history mode for router by default

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

Then, install will be completed after a few minuts.

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

added 1 package from 1 contributor and audited 24882 packages in 46.99s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

Add Vuetify to the project

Add Vuetify

$ vue add vuetify

Select y (or N if you would register current state with git repository first, but I think it doesn't make much sense.)

 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N) 

Choose Default.

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced) 

Install process will be completed after a few minuts.

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

Run server.

$ npm run serve

Customize default vuetify app

On App.vue, remove v-app-bar



 
 
 
 
 
 
 
 
 
 
 
 
 
 







<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        text
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>
<template>
  <v-app>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

replace the body of v-content from HelloWorld to router-view





 




<template>
  <v-app>

    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

remove all HelloWorld relateds

<template>
  <v-app>

    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>

delete Helloworld.vue component

On Home.vue view, remove all Helloworld relateds, replace <HelloWorld /> with simple <div>

<template>
  <div class="home">
    <h1>Homepage</h1>
  </div>
</template>

<script>

export default {

};
</script>

Use finished files

You can clone completed files with following command.

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v01

initialization

Move to template4vutify folder, and do npm install to install dependent projects as vue and vuetify.

cd template4vutify
npm install

run test server.

Run test server as npm run serve. You can open this by http://localhost:8080/ or IP Addr of the running PC with port 8080.

references


Last Updated: 2/19/2020, 10:27:57 AM