Учебное пособие по Vuetify с примерами с нуля — тема сегодняшнего дня. Для этого урока нам нужны некоторые знания о Vue cli. Vuetify — это структура компонентов материалов для приложений Vue. Vuetify — это структура семантических компонентов для Vue. Он нацелен на предоставление чистых, семантических и повторно используемых компонентов, которые ускоряют создание вашего приложения.
Пример учебного пособия Vuetify
Мы начнем в этом руководстве, установив Vuetify. Если вы хотите узнать больше о конкретных компонентах, ознакомьтесь с его официальной документацией. Vuetify имеет восемь готовых шаблонов Vue CLI. Мы будем использовать шаблон vuetifyjs/webpack .
Шаг 1. Установите Vuetify.
Установите его с помощью следующей команды.
npm install -g vue-clivue init vuetifyjs/webpack vuetify-tutorialcd vuetify-tutorialnpm run dev
После установки я открою сервер на порту: 8080. Здесь вы можете увидеть страница стартового шаблона.
Шаг 2: Определите структуру папок.
Вот наша папка состав. Наша основная папка — src. При этом нам нужно разместить наш код в хорошо организованном виде.
Если вы перейдете в файл src >> App.vue , он будет выглядеть так.
//App.vue icon> web remove -icon> menu compare_arrows Переключить панель (щелкните меня) & copy; 2017 экспорт по умолчанию {data () {return {clipped: false, drawer: true, fixed: false, items: [{icon : 'bubble_chart', title: 'Inspire'}], miniVariant: false, right: true, rightDrawer: false, title: 'Vuetify.js'}}, name: 'App'}
Уже есть куча компонентов. Все остальные элементы header , sidebar , drawer и footer связаны вместе. здесь. Мы также инициализировали vue-router. Файл App.vue включен в файл main.js .
//main.js//Сборка Vue версия для загрузки с помощью команды `import`//(только во время выполнения или автономная) была установлена в webpack.base.conf с псевдонимом. import Vue from 'vue'import App from' ./App'import router from '. /router'import Vuetify из 'vuetify'import' vuetify/dist/vuetify.min.css'Vue.use (Vuetify) Vue.config.productionTip = false/* eslint-disable no-new */new Vue ({el: '#app', router, components: {App}, template: ''})
В область содержимого этого приложения мы уже включили один компонент. Вы можете увидеть этот компонент в файле src >> components >> HelloWorld.vue .
//HelloWorld.vue
& # 8220; Сначала решите проблему. Затем напишите код. & # 8221;h1, h2 {font-weight: normal;} ul {list-style-type: none; заполнение: 0;} Ли {дисплей: встроенный блок; margin: 0 10px;} a {color: # 42b983;}
Итак, в будущем, если нам нужно будет создавать все больше и больше компонентов, нам нужно будет разместить эти компоненты здесь. Теперь удалите другие компоненты внутри файла App.vue . Мы включим и настроим некоторые компоненты с нуля. После удаления некоторых встроенных компонентов наш файл App.vue выглядит следующим образом.
//App.vue экспорт по умолчанию {}
Компонент содержит все наше приложение vuetify material. обрабатывает различные маршруты для нашего приложения.
Шаг 3. Создайте панель инструментов для заголовка.
В файле App.vue напишите следующий код.
//App.vue экспорт по умолчанию {}
означает, что наша фоновая тема становится черной или темной. Также определяет элементы навигации по заголовку для нашего приложения Vue. Кроме того, вы можете изменить цвет фона или только цвет компонента v-toolbar, добавив свойство класса и имя цвета, включенные в Vuetify .
//Приложение .vue экспорт по умолчанию {}
Отображает следующий интерфейс.
Дополнительные цветовые комбинации см. в палитре цветов материала.
Сейчас , добавьте логотип или марку навигационной панели, чтобы сказать, чтобы сказать, в файл заголовка. Для этого нам нужно добавить еще один элемент внутри элемента v-toolbar .
Учебное пособие по Vuetify
Следующим шагом является добавление элементов на нашу панель навигации.
//App.vue Учебное пособие по Vuetify Vue Vuex Nuxt -toolbar>
Подробнее о кнопке читайте в документации Vuetify.
Шаг 4. Добавьте панель навигации.
Во-первых, нам нужно добавить компонент панели в наше приложение . .vue . Так что добавьте этот компонент чуть выше компонента v-app .
//App. vue
Джон Лейдер Теперь нам нужно подключить этот компонент к значку ящика. Итак, сначала определите для него данные модели. Данные простые. Нам просто нужно переключить навигацию. Итак, мы можем взять одно свойство под названием «ящик». Когда пользователь щелкает значок ящика, он становится противоположным тому, что находится в текущем состоянии. Мы можем сделать это с помощью v-model , чтобы изменить свойство атрибута « drawer ».
//App. vue export default {data () {return {drawer: false}}}
По умолчанию ящик имеет значение false . Кроме того, нам нужно прикрепить это свойство к этому v-toolbar-icon .
//App.vue
Вышеупомянутая строка кода вставляется внутри компонента . Итак, весь наш файл App.vue выглядит так.
//App.vue Учебное пособие по Vuetify -title> Vue Vuex Nuxt btn>
Итак, это это то, как вы можете создавать компоненты один за другим. Вы можете просмотреть все компоненты в их основной документации. Это Учебное пособие по Vuetify — всего лишь обзор того, как вы можете использовать этот Materialize на основе компонентов Vue.js .
