Passé de mode

Back to contents of Vuetify

Make Vuetify 2.0 project by vue-cli

In this document, I'll show you how to make a empty project of Vuetify 2.0 by vue-cli. Completed project would be like this site site. Also completed files are available as follows.

Setup Vue SPA project with vue-cli

update vue-cli

$ sudo npm install -g @vue/cli

$ vue --version
3.10.0

cleate project

$ vue create ulbl-vuetify

Select Manually select features

Vue CLI v3.10.0
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features

Add Router.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Use default.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)

Use default.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

Use default.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Select package.json.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json

Use default.

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N)

Vue project creation is completed.

🎉  Successfully created project ulbl-vuetify.
👉  Get started with the following commands:

 $ cd ulbl-vuetify
 $ npm run serve

Move to created project folder.

$ cd ulbl-vuetify/

Add Vuetify to the project

Add Vuetify

$ vue add vuetify

Use default.

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

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

2019.08.21 posted.
2019.10.23 last updated