Following steps are confirmed at 7th June 2021 by me.
1 update vue-cli
$ yarn global add @vue/cli
$ vue --version
@vue/cli 4.5.13
2 cleate your project
vue create myproject
Select Vue 2 for now.
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
Wait an ages (-: for creating your project.
Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)
Vue CLI v4.5.13
✨ Creating project in /Volumes/devtmp/MyVuetify/myproject.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.10
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 198.70s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
success Saved lockfile.
✨ Done in 269.16s.
⚓ Running completion hooks...
[-/4] ⠠ waiting...
📄 Generating README.md...
🎉 Successfully created project myproject.
👉 Get started with the following commands:
$ cd myproject
$ yarn serve
Then move to created project folder.
$ cd myproject
3 Add router
$ vue add router
I recommend to select history mode as "Yes", but it OK as you like.
? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n)
Wait a couple of ages (-:
$ vue add router
📦 Installing @vue/cli-plugin-router...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
success Saved lockfile.
success Saved 0 new dependencies.
✨ Done in 339.87s.
✔ Successfully installed plugin: @vue/cli-plugin-router
? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) Yes
🚀 Invoking generator for @vue/cli-plugin-router...
📦 Installing additional dependencies...
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 105.88s.
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-router
4 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 uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)
Select default
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
Preview (Vuetify 3 + Vite)
Prototype (rapid development)
V3 (alpha)
Configure (advanced)
Wait few ages.
5 Delete useless decorations from App.vue
Open src/App.vue file, and delete the lines from <v-app-bar>
to </v-app-bar>
. After this, your App.vue
should be as follows:
<template>
<v-app>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
//
}),
};
</script>
Then, remove src/views/Home.vue
and recreate it as copy from src/views/About
to src/views/Home.vue
as follows
cp src/views/About.vue src/views/Home.vue
Then, open Home.vue
and change the string This is an about page
to This is an home page
. After this, your Home.vue
should be as follows:
<template>
<div class="about">
<h1>This is an home page</h1>
</div>
</template>
Finally, remove src/components/HelloWorld.vue
file.
1.6 Add Material Icon link
Add Material Icon link to public/index.html
as follow:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
inside between <head>
and </head>
. After this, your index.html
file can be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
7 Start server
Start server as
yarn serve
Then open running App, usually http://localhost:8080/
DONE Compiled successfully in 20496ms 16:14:57
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.11.9:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
You must be looking at such a dull page.
In case you're facing this error, downgrade sass-loader as mentioned this answer as follows:
yarn add sass-loader@7.3.1
History
- 07 jun 2021: first version
Top comments (0)