В предыдущем разделе мы инициализировали наш проект Vue. Если у вас нет возможности прочитать его, посмотрите, он требует начальной настройки. 👇
Теперь пришло время использовать Vue и узнать, как мы можем структурировать нашу веб-страницу с повторно используемыми компонентами и поддерживать наш код в чистоте и порядке.
Почему Vue вместо React или Angular?
Если коротко: потому что так проще.
Vue — это фантастическая среда JavaScript, которая отлично работает как для малых, так и для больших проектов. В то время как такие фреймворки, как React или Angular, больше подходят для крупных корпоративных приложений.
Помните: мы просто делаем личное портфолио, никаких лишних настроек! Если вы раньше использовали React или Angular, вы будете чувствовать себя как дома, используя Vue. 😉
Что такое компонент?
Компонент — это файл, содержащий код, который можно легко использовать повторно. Одним из наиболее значительных преимуществ использования веб-фреймворков является то, что они позволяют нам без проблем инкапсулировать наш код в более мелкие, более простые для чтения и отладки компоненты.
Компонент Vue состоит из трех разделов:
Шаблон. Здесь вы пишете свой HTML. В Vue вы также можете встроить код в HTML, заключив его в двойные фигурные скобки:
<template>
<div>
{{1 + myVar}}
</div>
</template>
Сценарий. Здесь вы пишете логику вашего компонента. В большинстве случаев вы увидите функцию, известную как «данные», которая возвращает объект. Здесь мы можем объявить начальное реактивное состояние для экземпляра компонента. Вы можете отправлять свойства (называемые «props») этому компоненту. Эти данные отправляются как атрибут HTML при вызове компонента. В этом разделе также есть много других вещей, но не волнуйтесь; мы проверим их позже.
<script>
export default {
data(){
return {
myVar: 2
}
}
}
</script>
Структура проекта Vue
В папке Source нашего проекта вы найдете что-то похожее на это файловое дерево:
App.vue: это точка входа в проект. Здесь мы добавим элементы, которые мы хотим отображать всегда (например, панель навигации или нижний колонтитул), и маршрутизацию.
Папка Views: здесь мы будем хранить файлы «view». Вы можете думать о них как о компонентах Vue, которые символизируют разные страницы на нашем сайте, которые мы будем называть другими компонентами.
Папка маршрутизатора. Это папка, в которой хранятся настройки маршрутизации. Если вы не знаете, что такое маршрутизация, это довольно просто: с Vue CLI мы уже установили Vue Router, расширение, которое позволяет нам добавлять навигацию на наш сайт без перезагрузки браузера при переключении URL-адреса.
Папка компонентов: здесь будут храниться все наши повторно используемые компоненты! Такие вещи, как кнопки, контейнеры, что угодно. Компоненты, которые вы собираетесь использовать в разных представлениях, должны храниться в этой папке.
Папка Assets: Как мы видели в предыдущей главе, здесь хранятся все наши файлы SCSS и статические файлы.
Маршрутизация
С плагином маршрутизации Vue мы сможем добавить навигацию на наш веб-сайт и получить доступ к различным маршрутам без перезагрузки нашего браузера. Посмотрим, как мы можем настроить его, чтобы создать новую страницу, на которой мы сможем хвастаться нашими личными проектами!
Создание файла Vue
Во-первых, мы должны создать Vue-файл нашего представления, в котором мы будем отображать информацию о нашей странице.
Это довольно просто! Создайте файл с именем «Projects.vue» в папке представлений и используйте шаблон Vue по умолчанию. (Не забудьте добавить некоторый текст, чтобы увидеть, отображает ли он что-то, и указать язык и область действия стиля!)
Это должно выглядеть так:
//Projects.vue
<template>
<div class="projects-section">
This is the Projects view
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.projects-section {
}
</style>
Совет: рекомендуется установить подключаемый модуль Vetur, чтобы добавить правильную окраску кода и фрагменты кода для Vue в коде VS и расширение браузера Vue Devtools.
Настройка маршрутизатора
После создания файла вам необходимо указать URL-адрес в index.js внутри папки маршрутизатора.
Вам нужно будет импортировать файл Projects и добавить этот объект сразу после объекта маршрута «Home»:
//router/index.js
import Projects from '../views/Projects.vue'
...
{
path: '/projects',
name: 'Projects',
component: Projects
},
Вот как мы объявляем путь к новому маршруту (в данном случае это «yourweburl.com/projects») и компонент, который будет отображаться там (компонент «Проекты»).
Добавление ссылки на маршрутизатор
Теперь пришло время получить доступ к этому новому маршруту! Vue Router поставляется со встроенными компонентами навигации, называемыми router-links: это нативные компоненты, которые принимают реквизит «to». Он используется для указания, куда этот элемент должен отправляться нам, когда мы нажимаем на него. Мы добавим его в нашу предварительно созданную «Nav» внутри нашего файла App.vue. Таким образом, он всегда будет отображаться, и поэтому мы всегда сможем переключать страницы!
App.vue <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/projects">Projects</router-link> </div>
Вы также можете настроить внешний вид активной ссылки с помощью класса router-link-exact-active.
Если все работает правильно, вы сможете перейти на новый маршрут «проекты» при нажатии на верхнюю ссылку!
Наш первый компонент
Мы создадим простой текстовый контейнер, чтобы понять некоторые возможности компонента. Как всегда, нам нужно начать с создания файла TextContainer.vue в нашей папке компонентов, в который мы добавим типичный шаблонный код Vue.
Внутри раздела шаблона мы будем использовать следующий код: div с классом «текстовый контейнер», а внутри него мы также добавим компонент «слот». Это позволит нам принимать содержимое шаблона из вызовов компонентов! Мы увидим больше об этом через минуту.
//TextContainer.vue <template> <div class="text-container"> <slot/> </div> </template>
Теперь нам нужно вызвать наш компонент в нашем домашнем представлении. Для этого нам нужно его импортировать, и благодаря компоненту слота мы можем писать в нем, как если бы это был простой элемент HTML.
//Home.vue
<template>
<div class="home">
<TextContainer> Lorem Ipsum </TextContainer>
</div>
</template>
<script>
import TextContainer from '@/components/TextContainer.vue';
export default {
name: "Home",
components: {
TextContainer,
},
};
</script>
Совет: @ – это псевдоним /src . Вы всегда можете использовать его внутри файлов Vue.
И самое главное: как я уже говорил, компоненты можно использовать повторно. Вы можете вызывать этот текстовый контейнер столько раз, сколько захотите!
Итак, применив немного магии HTML и CSS, мы можем получить что-то подобное, используя вдвое меньше кода:
<template>
<div class="home">
<TextContainer>
<h2>About me</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem minus
at, nobis ut beatae incidunt quos a rerum et odit esse ullam sit aliquam
vel! Doloribus provident magnam accusamus architecto velit a dolores
explicabo rerum aperiam unde quas sunt magni corrupti, quis vitae vero.
Explicabo adipisci perferendis pariatur dolores illum!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem minus
at, nobis ut beatae incidunt quos a rerum et odit esse ullam sit aliquam
vel! Doloribus provident magnam accusamus architecto velit a dolores
explicabo rerum aperiam unde quas sunt magni corrupti, quis vitae vero.
Explicabo adipisci perferendis pariatur dolores illum!
</p>
</TextContainer>
<TextContainer>
<h2>My Skills</h2>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</TextContainer>
<TextContainer>
<h2>Contact me!</h2>
<p>[email protected]</p>
</TextContainer>
</div>
</template>
<script>
// @ is an alias to /src
import TextContainer from "@/components/TextContainer.vue";
export default {
name: "Home",
components: {
TextContainer,
},
};
</script>
<style lang="scss" scoped>
.home {
display: flex;
gap: 20px;
flex-flow: row wrap;
.text-container {
flex: 1 1 0px;
min-width: 45%;
}
}
</style>
Немного глубже: компонент Projects Showcase
Хорошо, теперь, когда мы знаем основные функции компонента, пришло время изучить некоторые основные концепции. И есть ли лучший способ сделать это, чем реализовать карусель-витрину проекта?
Прежде всего, мы должны создать компонент Showcase.vue и отобразить его в представлении Projects. Я не буду вдаваться в подробности. Я уверен, что вы вполне комфортно делаете это сейчас. Перейду сразу к делу и покажу вам раздел сценария:
Showcase.vue
<script>
export default {
data() {
return {
projects: [
{
title: "My first Project",
desc: `Lorem ipsum ...`,
techs: ["PostgreSQL", "React", "Redux", "Node"],
urlText: "Github",
url: "https://github.com/maxfer03/solana-digital-nomads",
img: "https://efectocolibri.com/wp-content/uploads/2021/01/placeholder.png",
},
...
],
index: 0,
};
},
methods: {
async next() {
if (this.projects.length - 1 === this.index) {
this.index = 0;
} else {
this.index++;
}
},
async prev() {
if (this.index === 0) {
this.index = this.projects.length - 1;
} else {
this.index--;
}
},
},
};
</script>
Данные
Как я уже упоминал, функция данных возвращает все реактивные переменные, которые мы будем использовать в компоненте. Если вы родом из React, вы можете думать об этом как о состоянии React. В этом случае у нас есть две переменные внутри наших данных: массив «проекты», где мы будем хранить все наши проекты как объекты, и «индекс», который является числом. Это будет полезно, чтобы узнать текущий отрендеренный проект. Мы будем манипулировать этой переменной, чтобы увидеть следующий или предыдущий проекты.
Методы
Объект методов — это место, где вы храните все свои функции. Эти методы могут (и, вероятно, будут) взаимодействовать с переменными данных, чтобы сделать наш компонент действительно реактивным и обновляемым. Как видите, у нас есть два пути: предыдущая и следующая функции. Они обновляют элемент индекса в зависимости от его значения, поэтому мы можем непрерывно циклически перемещаться по нашим проектам, не выходя за границы.
Примечание. Мы должны вызывать наши переменные, используя ключевое слово «this», чтобы получить к ним доступ. Иначе не получится.
Это только верхушка айсберга относительно того, какие инструменты есть в нашем разделе скриптов, но они отлично подойдут для нашего небольшого портфолио. Если вы хотите копнуть глубже, вы можете проверить жизненный цикл Vue, вычисляемые свойства и этот список можно продолжить!
HTML
<template>
<div class="proj-showcase">
<div class="carousell">
<button class="carousell-btns btn-back" @click="prev">{{ "<" }}</button>
<div class="carousell-content">
<img
v-if="projects[index].img"
:alt="projects[index].title + ' image'"
class="carousell-img"
:src="projects[index].img"
/>
<div class="carousell-content-text">
<h3>{{ projects[index].title }}</h3>
<h4>
<span v-for="(tech, i) in projects[index].techs" :key="i">
{{ tech }}{{ i === projects[index].techs.length - 1 ? "" : ", " }}
</span>
</h4>
<p>
{{ projects[index].desc }}
</p>
<a v-if="projects[index].url" :href="projects[index].url">{{
projects[index].urlText
}}</a>
<span v-else>{{ projects[index].urlText }}</span>
</div>
</div>
<button class="carousell-btns btn-next" @click="next">{{ ">" }}</button>
</div>
</div>
</template>
Здесь есть несколько новых вещей, которые следует отметить в HTML:
Двойные фигурные скобки: мы можем встроить логику в наш HTML-шаблон, заключив код в двойные фигурные скобки. Таким образом, мы можем легко визуализировать наши переменные.
Примечание: в отличие от раздела «Скрипт», здесь мы можем вызывать наши переменные без ключевого слова «this».
@click : это событие. Точно так же, как вы можете иметь событие onClick в React или Javascript, мы применяем синтаксис @ при использовании событий в Vue: @click, @mouseenter, @mouseleave и т. д. Как видите, также можно вызывать функции, когда обстоятельства уволенный.
:src, :href, :alt : использование двоеточия перед любой заданной опорой — это стратегия Vue для встраивания Javascript в реквизиты и атрибуты HTML.
v-if, v-else: это полезный атрибут Vue, который позволяет нам отображать HTML условно! Если условие v-if возвращает false, будет отображаться код v-else.
v-for: это, наверное, моя любимая функция Vue. Это простой цикл for, который позволяет нам перебирать некоторый код Javascript или наши реактивные переменные. Никаких хлопот, никакого сопоставления массивов, просто простой цикл for с синтаксисом pythonic.
Обладая этими знаниями и немного CSS, мы можем получить масштабируемый проект и красивую карусель в кратчайшие сроки!
Заключение и следующие шаги
Теперь вы можете создать реактивный, модульный и чистый веб-сайт на базе Vue с помощью того, что вы узнали из этого поста. Теперь пришло время быть немного более творческим! Агрегируйте компонент нижнего колонтитула или отредактируйте стили панели навигации, как хотите! Не забудьте использовать возможности переменных SCSS и глобальных классов или даже попробуйте ввести некоторые миксины! Небо это предел.
Кроме того, не торопитесь, чтобы написать что-то хорошее о себе. Приоритет портфолио — помочь вам продать себя, так что хвастайтесь! Раскройте свои самые сильные стороны, и пусть ваша индивидуальность сияет через ваши слова и стиль. Не забудьте проверить Github для вдохновения! Здесь и здесь несколько мест, с которых можно начать.
Вы можете посетить репозиторий, если хотите использовать этот же код в качестве основы. Имейте в виду, что если вы посетите его после окончания сериала, вы испортите его себе, ожидая реализации Three.js!
В следующем и последнем разделе мы, наконец, внедрим Three.js в наш проект и разработаем трехмерный интерактивный фон. Следите за обновлениями!
