Учебное пособие о том, как использовать библиотеку дизайна материалов с открытым исходным кодом — Vue Materials, чтобы предоставить нативное приложение, такое как UI / UX, для нашего приложения.
Добро пожаловать друзья, переиздание ранее написанного рассказа, но все же поможет вам понять основы. В одной из предыдущих историй мы создали приложение для списков дел. Это простое приложение, в котором вы можете добавлять задачи и отмечать их как выполненные или отмененные. Я оставляю это на ваше усмотрение, чтобы добавить больше функциональности для вас. Если вы заинтересованы в добавлении дополнительных функций, например, в удалении задач, организации задач в проекты, использовании постоянного хранилища (локального/удаленного), чтобы гарантировать, что ваши данные не будут уничтожены при обновлении страницы, и вам нужна помощь в этом, ты можешь подойти ко мне.
В этой статье я собираюсь объяснить вам, как использовать библиотеку дизайна материалов с открытым исходным кодом — Vue Materials, чтобы предоставить нативное приложение, такое как UI / UX, для нашего приложения. До сих пор мы не обсуждали какие-либо пакеты или инструменты командной строки. Таким образом, я собираюсь использовать Vue Materials через сеть доставки контента (CDN), хотя это не рекомендуется. Рекомендуемый подход — использование CLI и инструментов упаковки (которые помогут оптимизировать производительность и уменьшить размер кода JavaScript, загружаемого в браузер для запуска веб-сайта/веб-приложения) при работе со сложными проектами. Тем не менее, CDN очень удобны для быстрых демонстрационных приложений, подобных этому.
Живая демонстрация конечного продукта. Вы можете взаимодействовать с ним.
Прежде чем мы начнем, убедитесь, что вы следовали предыдущей истории и у вас есть окончательный код, так как мы будем продолжать использовать тот же код. Первое, что мы сделаем, это добавим библиотеку Vue Materials в наш проект, связав необходимые файлы CSS и JavaScript в разделе head.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>An Awesome Vuejs Course</title> <!-- Add following lines --><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons"><link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"><link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css"><script src="https://unpkg.com/vue-material"></script> <!-- ################# --> <style> body { text-align: center; }.notactive { text-decoration: line-through; }</style> </head>
Вам может быть интересно, почему мы добавили vue.js в тело и почему мы добавили vue-materials в голову? Я хотел бы, чтобы вы ответили на этот вопрос. На этот раз мы собираемся переместить тег скрипта для импорта Vue также в заголовок. Убедитесь, что вы переместили тег <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> непосредственно перед тегом <script src="https://unpkg.com/vue-material"></script> в разделе заголовка. Вы также можете использовать <script src="https://unpkg.com/vue"></script>вместо <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>, и это даст тот же результат.
После того, как мы завершили добавление vue-материалов в наше приложение и придали ему собственный пользовательский интерфейс/UX, похожий на приложение, переместите <script src="https://unpkg.com/vue-material"></script> и <script src="https://unpkg.com/vue"></script> в тег body непосредственно перед началом вашего первого тега script. Сохраните изменения и обновите веб-страницу. Вы найдете ответ на поставленный выше вопрос. Пожалуйста, напишите в разделе обсуждения, что вы наблюдали и каков ваш вывод. Я отвечу, чтобы либо поздравить вас, либо исправить ответ.
Отличная работа! Вы импортировали библиотеку vue-materials в наш проект. Теперь, прежде чем мы начнем ее использовать, нам нужно сообщить Vue.js, что мы собираемся использовать эту библиотеку. Мы можем сделать это, используя метод Vue.use().
Измените тег script, чтобы добавить:
<script>
// Add this line before creating vue instance
Vue.use(VueMaterial.default);
let myVue = new Vue({
el: '#app',
data: {
newTask: 'Mayank Chaudhari',
tasks: []
},
methods: {
addTask() {
if(this.newTask.trim() != '')
this.tasks.push({
title: this.newTask,
done: false
});
this.newTask = '';
}
}
});
</script>Понимание компонентов Vue.js и пользовательских тегов было бы полезно для понимания того, что мы собираемся делать сейчас. Но мы рассмотрим эти вещи чуть позже. А пока просто следуйте этому руководству, чтобы создать свой потрясающий пользовательский интерфейс.
Теперь все готово для использования vue-материалов на нашем сайте. Теперь вы можете просмотреть https://vuematerial.io/getting-started/ для различных элементов и компонентов пользовательского интерфейса, доступных для использования в нашем приложении.
Изучив библиотеку различных элементов и компонентов пользовательского интерфейса, я выбираю нижнюю панель для добавления в наше приложение. Вы можете найти это на https://vuematerial.io/components/bottom-bar/#custom.
Вы можете нажать кнопку <>, обведенную кружком на изображении выше, чтобы посмотреть код, использованный для создания этого компонента. Код будет выглядеть примерно так, как показано на следующем изображении:
Этот код состоит из трех разделов: <template></template> , <script></script> и <style></style>. По сути, это однофайловый компонент Vue. Мы обсудим компоненты Vue и отдельные файловые компоненты в отдельных постах. А пока давайте сосредоточимся на том, как использовать этот код для нашего быстрого демонстрационного приложения.
Шаг 1: Скопируйте содержимое шаблона в свой HTML-код внутри элемента div с идентификатором приложения прямо над тегом script. Остальной код пока оставьте как есть.
Шаг 2: Скопируйте тег <style> в элемент head
Скопируйте элемент стиля в элемент head. Обязательно удалите lang="scss" scoped эти параметры, используемые и понятные инструментам CLI. Ваш тег head должен выглядеть примерно так:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>An Awesome Vuejs Course</title> <!-- Add following lines --><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons"><link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"><link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css"><script src="https://unpkg.com/vue-material"></script> <!-- ################# --> <style> body { text-align: center; }.notactive { text-decoration: line-through; }</style><!-- style tag copied from vue-materials --> <style> @import "~vue-material/theme/engine";.phone-viewport { width: 322px; height: 200px; display: inline-flex; align-items: flex-end; overflow: hidden; border: 1px solid rgba(#000, .26); background: rgba(#000, .06); }.badge { width: 19px; height: 19px; display: flex; justify-content: center; align-items: center; position: absolute; top: 6px; right: 6px; background: #fff; border-radius: 100%; color: #000; font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: -.05em; font-family: 'Roboto Mono', monospace; } </style> </head>
Шаг 3: Скопируйте тег <script> — этот шаг можно пропустить, так как в данном конкретном случае этот скрипт нам не нужен. Я включил этот раздел на тот случай, если вы захотите использовать какой-то другой компонент из vue-materials.
Мы подробно обсудим концепцию примесей позже. На данный момент нам достаточно знать, что миксин используется для совместного использования общего кода экземплярами Vue. Как следует из названия, код внутри объекта миксина смешивается с кодом нашего экземпляра Vue в соответствии с некоторыми правилами. Например, объект данных будет объединен с данными, а объект методов будет объединен с объектом методов. Однако вам нужно позаботиться о том, чтобы не было перекрывающихся имен файлов, чтобы обеспечить правильное поведение. Все, что вам нужно сделать сейчас, это скопировать тег скрипта и внести несколько изменений. Итак, скопируйте тег сценария из материалов vue и вставьте его перед тегом сценария, в котором мы создаем экземпляр Vue. Замените export default пусть myMixin =.
<script> let myMixin = { name: 'BarCustomTemplate', data: () => ({ newPosts: 0, checkInterval: null }), methods: { clearCheckPosts () { window.clearInterval(this.checkInterval) this.checkInterval = null }, clearNewPosts () { this.clearCheckPosts() this.newPosts = 0 }, checkNewPosts (activeItem) { if (activeItem !== 'item-posts' && !this.checkInterval) { this.checkInterval = window.setInterval(() => { if (this.newPosts === 99) { this.newPosts = '99+' this.clearCheckPosts() } else { this.newPosts++ } }, 1000) } } }, mounted () { this.checkNewPosts() } } </script><!-- above script copied from vue materials and modified just one line--><script> // Add this line before creating vue instance Vue.use(VueMaterial.default);// in the vue instance add thelet myVue = new Vue({ el: '#app', mixins: [myMixin],data: { newTask: 'Mayank Chaudhari', tasks: [] }, methods: { addTask() { if(this.newTask.trim() != '') this.tasks.push({ title: this.newTask, done: false }); this.newTask = ''; } } }); </script>
Теперь добавьте этот только что созданный миксин в наш экземпляр Vue, добавив mixins: [myMixin] под тегом el, как показано в приведенном выше коде.
Сохраните это и обновите браузер. Вы должны увидеть ту же нижнюю панель, что и на сайте vue-materials.
Все, что нам нужно сделать сейчас, это изменить этот код в соответствии с нашим приложением. Мы собираемся добавить к этому три вкладки: «Все задачи», «Активные задачи» и «Выполненные задачи». У нас есть все задачи в объекте tasks внутри объекта data нашего экземпляра Vue. Теперь мы создадим вычисляемые свойства с именами completed и active. Добавьте следующие computed методы, указанные ниже, в наш экземпляр Vue.
let myVue = new Vue({
...
...
...
computed: {
completed(){
return this.tasks.filter((task)=>task.done);
},
active(){
return this.tasks.filter((task)=>!task.done);
}
}
}В нижней навигации, которую мы импортировали из материалов Vue, мы можем отображать значки на всех вкладках. Но пока мы будем показывать значки только для активных задач. Итак, давайте переместим вкладку сообщений на первую позицию. Затем мы переименуем вкладку «Сообщения» в «Активные задачи», вкладку «Главная» в «Выполненные задачи» и вкладку «Страницы» в «Все задачи» и удалим вкладку «Избранное». Мы также изменим иконки. Так как мы хотим показывать значки для активных задач, мы заменим newPosts на active.length.
Ваш HTML для нижней панели должен выглядеть примерно так:
Если вы скопировали скрипт из материалов vue, как обсуждалось в предыдущем разделе, посмотрите на объект myMixins. Мы понимаем, что нам не нужны никакие из этих методов и данных. Поэтому мы удалим этот тег скрипта, а также удалим миксин из нашего экземпляра Vue, созданного с помощью new Vue({}) .
Следуя тем же шагам, мы добавим дизайн к заголовку, а также к элементам списка. Это также будет хорошим упражнением для проверки вашего понимания. Для окончательного кода вы можете посмотреть этот jsfiddle. Я добавлю компонент приложения и компонент диалога.
Вау! Поздравляем! Вы только что создали потрясающее приложение для ведения дел с помощью Vue.js и добавили собственный пользовательский интерфейс, похожий на приложение, используя библиотеку vue-materials с открытым исходным кодом.
Кроме того, не забудьте проверить наши курсы, доступные по очень сниженной цене.
https://www.udemy.com/course/vuejs-complete-course-plus-guide/?referralCode=93BDA4A1FE3F73C37CD2
https://www.udemy.com/course/vue-3-essentials/?couponCode=HAPPYLEARNING
Большое спасибо, что нашли время, чтобы прочитать эту статью и желаю вам всего наилучшего!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
