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 (opens new window) 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

Last Updated: 2/28/2021, 4:31:52 AM

← CSS related matters of Vuetify 2.0 →