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
← Vuetify