Для примера мы будем создавать проект "Доска объявлений".
Для создание проекта в консоли переходим на нужную папку где будет наш проект и вводим команду - npm create vuetify.
Придумываем имя нашему проекту - Project name, в нашем случае - message-board. Выбираем тип установки, в нашем случае - Essentials (Vuetify, VueRouter, Pinia). Выбираем инсталлятор для проекта, в нашем случае - npm.
После развертывания приложения, чистим его от ненужных элементов, значков, страниц, компонентов и меняем названия и описания.
Если eslint будет выдавать ошибку "Component name "Default" should always be multi-word.", то в .eslintrc.js нам нужно внести небольшие изменения.
.eslintrc.js
/* jshint ignore:start */
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
],
rules: {
'vue/multi-word-component-names': 0,
},
}
Так же во все js файлы, которые будут выдавать ошибки синтаксиса jshint, в начало добавляем строку "/* jshint ignore:start */".
Теперь после чистки прочих настроек с помощью Vuetify.js создадим структуру проекта.
Поменяем основной шаблон проекта на тот который нам нужен, файл View.vue в папке Layouts отвечает как раз за это. На сайте Vuetify.js на странице макетов приложения выберем нужный нам шаблон для страниц и вставим код в файл View.vue.
View.vue до изменений
<template>
<v-main>
<router-view />
</v-main>
</template>
<script setup>
//
</script>
View.vue после изменений
<template>
<v-navigation-drawer>
<v-list>
<v-list-item title="Панель навигации"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar title="MSG-BOARD"></v-app-bar>
<v-main>
<router-view />
</v-main>
</template>
<script setup></script>
Далее, теперь для примера скроем боковую панель, для контента сделаем отступы, а "Меню" соберём по такому же принципу как выше, используя элементы Vuetify.js.
View.vue
<template>
<v-navigation-drawer temporary>
<v-list>
<v-list-item title="Панель навигации"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn>
Button
</v-btn>
<v-btn>
Button
</v-btn>
<v-btn>
Button
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<router-view />
</v-container>
</v-main>
</template>
<script setup></script>
Вот по такому принципу собираются все элементы сайта как конструктор используя элементы Vuetify.js. "v-spacer" в данном примере как раз отвечает за растягивание панели и перемещение последующих элементов в другой конец экрана.
С помощью API для каждого компонента мы можем менять параметры отображения, такие как цвет, высота, заливка, округление и т.п.
Начнем с добавления иконок к кнопкам и ссылкам. Во Vuetify мы можем воспользоваться библиотеками иконок Material Design Icons, Material Icons, Font Awesome 4 и Font Awesome 5. Material Design Icon вшит по умолчанию, для остальных библиотек нужно подключение, и как это сделать смотрим документацию по Vuetify.
Пример добавления иконки к кнопке
<v-btn>
<v-icon start icon="mdi-account-box"></v-icon>
Button
</v-btn>
Или так
<v-btn prepend-icon="mdi-account-box">
Button
</v-btn>
Далее сделаем открытие бокового меню по нажатию на кнопку.
View.vue
<template>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item title="Панель навигации"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn prepend-icon="mdi-account-box">
Button
</v-btn>
<v-btn>
Button
</v-btn>
<v-btn>
Button
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<router-view />
</v-container>
</v-main>
</template>
<script>
export default {
data: () => ({
drawer: false,
})
}
</script>
Теперь добавим ссылки. Создадим шаблон для ссылок.
View.vue шаблон для ссылок
<template>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item title="Панель навигации"></v-list-item>
<v-list-item prepend-icon="mdi-account-box" title="Button" value="Button"></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn prepend-icon="mdi-account-box">
Button
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<router-view />
</v-container>
</v-main>
</template>
<script>
export default {
data: () => ({
drawer: false,
})
}
</script>
Далее создадим базу наших ссылок в виде массива и циклом выведем их в нашем шаблоне как в верхнем меню, так и в боковом.
View.vue
<template>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item title="Панель навигации"></v-list-item>
<v-list-item
v-for="link of links"
:key="link.title"
:prepend-icon="link.icon"
:title="link.title"
:value="link.title"
:to="link.url"
></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
v-for="link of links"
:key="link.title"
:prepend-icon="link.icon"
:to="link.url"
>
{{ link.title }}
</v-btn>
</v-app-bar>
<v-main>
<v-container>
<router-view />
</v-container>
</v-main>
</template>
<script>
export default {
data: () => ({
drawer: false,
links: [
{ title: 'Login', icon: 'mdi-account-lock', url: 'login' },
{ title: 'Registration', icon: 'mdi-account-multiple-plus-outline', url: 'registration' },
{ title: 'Orders', icon: 'mdi-file-cabinet', url: 'orders' },
{ title: 'New ad', icon: 'mdi-file-document-plus-outline', url: 'new' },
{ title: 'My ads', icon: 'mdi-account-details', url: 'list' }
]
})
}
</script>
Router index.js
/* jshint ignore:start */
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('@/layouts/default/Default.vue'),
children: [
{
path: '',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue'),
},
{
path: '/registration',
name: 'Registration',
component: () => import('@/views/Registration.vue'),
},
{
path: '/orders',
name: 'Orders',
component: () => import('@/views/Orders.vue'),
},
{
path: '/new',
name: 'NewAd',
component: () => import('@/views/AddAd.vue'),
},
{
path: '/list',
name: 'MyAds',
component: () => import('@/views/MyAds.vue'),
}
],
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
export default router
Теперь адаптация, делается она с помощью классов типа "hidden-sm-and-down" или "hidden-md-and-up" как в примере ниже.
Пример адаптации на Vuetify
<v-app-bar>
<v-app-bar-nav-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn
v-for="link of links"
:key="link.title"
:prepend-icon="link.icon"
:to="link.url"
>
{{ link.title }}
</v-btn>
</v-toolbar-items>
</v-app-bar>
Добавим ссылку на главную страницу, и приведем все в порядок.
Финальный View.vue
<template>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item
v-for="link of links"
:key="link.title"
:prepend-icon="link.icon"
:title="link.title"
:value="link.title"
:to="link.url"
></v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-btn class="ml-2" to="/" icon="mdi-vuetify" variant="text"></v-btn>
<v-toolbar-title>MSG-BOARD</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn
v-for="link of links"
:key="link.title"
:prepend-icon="link.icon"
:to="link.url"
>
{{ link.title }}
</v-btn>
</v-toolbar-items>
</v-app-bar>
<v-main>
<v-container>
<router-view />
</v-container>
</v-main>
</template>
<script>
export default {
data: () => ({
drawer: false,
links: [
{ title: 'Login', icon: 'mdi-account-lock', url: 'login' },
{ title: 'Registration', icon: 'mdi-account-multiple-plus-outline', url: 'registration' },
{ title: 'Orders', icon: 'mdi-file-cabinet', url: 'orders' },
{ title: 'New MSG', icon: 'mdi-file-document-plus-outline', url: 'new' },
{ title: 'My MSG', icon: 'mdi-account-details', url: 'list' }
]
})
}
</script>
Кстати, export defaul можно писать и в другом виде, более на мой взгляд удобным.
Пример export defaul
<script>
export default {
data () {
return {
drawer: false,
links: [
{ title: 'Login', icon: 'mdi-account-lock', url: 'login' },
{ title: 'Registration', icon: 'mdi-account-multiple-plus-outline', url: 'registration' },
{ title: 'Orders', icon: 'mdi-file-cabinet', url: 'orders' },
{ title: 'New MSG', icon: 'mdi-file-document-plus-outline', url: 'new' },
{ title: 'My MSG', icon: 'mdi-account-details', url: 'list' }
]
}
}
}
</script>
Здесь вторая часть.