👁👁 Еще раз привет, и сегодня немного отличается от того, что я обычно делаю в своей повседневной деятельности программиста, а именно Vue! Мне было интересно познакомиться с новым фреймворком Front-End и Vue.js, на который я положил глаз:👨🏽💻
1- Легко и просто.
2- Супер быстро и сообщество УДИВИТЕЛЬНОЕ!🔥
3- Перспективность и масштабируемость для функционального проекта.
Короткий рассказ
Я начал изучать Vue.js, перейдя на один из известных ускоренных курсов на YouTube, вы знаете что-то быстрое, чтобы вникнуть в это. Итак, я решил применить то, что я узнал до сих пор, написав небольшой крошечный проект для LOTR & The Hobbit. . Это живой веб-сайт, который я загрузил в Firebase: https://lotr-th-vuejs.web.app/, а также есть полный проект с кодом во Flutter ЗДЕСЬ!
Да! Теперь пусть скучный парень ушел, и теперь наш Фродо возьмет на себя инициативу!
Наконец-то мы узнали истину в последней инстанции, и мой друг Vue.js помог мне сделать классный сайт. Да! Мы использовали следующие инструменты для создания нашей вещи под названием «сайт»:
1- Интерфейс командной строки Vue.
2- Код ВС.
Пользовательский пакет и разговорный язык:
1- JS 💦
2- Вью 2.6 🌟
3- Роутер и Аксиос
4-элементный пользовательский интерфейс.
Вот и все мой друг, желаю тебе быть готовым, ведь пришло время тяжелой работы! 4 элемента, которые мы создали, как следует из легенды: API, папка представлений, папка компонентов и файл маршрутизатора. Этот секрет сократил время, необходимое мне для того, чтобы все это осуществить и организовать!
# Государственное управление:
Нет необходимости в сложном управлении состоянием для управления данными в рамках проекта, я просто использовал самый простой и легкий способ: emit and property.
Где домашний вид будет вызывать фильмы, а затем передавать данные в свойство компонента. Испускание для представления Char. Для более подробной информации, продолжайте читать :)
# API (Аксиос):
Самое лучшее в этом API просто! Вы хотите получить фильмы? вы можете, и если вы хотите больше, просто зарегистрируйтесь, и вы можете получить ключ просто так! https://the-one-api.dev
import Axios from 'axios'
const KEY_API = 'get_the_key_by_yourself'
export default Axios.create({
baseURL: 'https://the-one-api.dev/v2/',
proxy: 'http://localhost:8080/',
headers: {
Authorization: 'Bearer ' + KEY_API
}
}
);
Здесь это будет пригодный для использования экземпляр для всего проекта. Легко звонить из любой точки проекта.
# маршрутизатор
Маршрутизация довольно проста: она обеспечивает 3 представления, а режим находится в режиме истории.
Вызов экземпляра Vue, чтобы разрешить использование библиотеки Vue Router в проекте, а также вызывать нужные представления для нашего маршрутизатора. Пожалуйста, указывайте имя маршрута не обязательно, но полезно для отладки.
# App.vue
3 элемента, которые содержит этот файл; шаблон вот так просто, блок сценария и стиль в CSS.
<template> <div id="app"> <navbar/> <transition name="fade" mode="out-in"> <router-view/></transition> </div> </template>
вызывая две основные части: компонент navbar и router-view, где он обычно показывает навигационные представления. Элемент transition относится к анимации, измененной в каком-либо скрипте CSS.
<script>
import {navbar} from './components'
export default {
name: 'app',
components:{
navbar
}}
</script>
Вызов компонента навигационной панели. Затем назначьте имя идентификатора/класса этого компонента в шаблоне App.vue.
Во-во-во, хорошо, это небольшая настройка анимации, а также фона приложения.
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.3s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
html,
body {
background: rgb(83, 23, 23);}
</style>
# ГЛАВНАЯ ПРОСМОТР
На приведенном ниже рисунке показана структура домашнего представления, которое содержит компоненты, а также другие необходимые методы, такие как вызов API и т. д.
дома.вью
Шаблон
Шаблон разделен на две строки, каждая из которых имеет свое назначение. Первый содержит текст заголовка MOVIES. Второй будет иметь базовую логику, которая проверяет, есть ли ошибка из API, поэтому если нет, то мы уверены, что есть что отображать.
Подсказка: я также использовал другой оператор if, чтобы проверить, не является ли объект списка фильмов нулевым, но вы также можете использовать v-else, чтобы отобразить все, что хотите, без данных для отображения для экземпляра!
Скрипт
Чтобы увидеть полный код, перейдите по ссылке GitHub или ЗДЕСЬ. здесь мы просто устанавливаем данные, которые содержат фильмы, сообщение об ошибке, если оно есть, и свойство загрузки для управления индикатором. beforeMount — это метод, используемый для вызова перед рендерингом компонента, и это лучшее место для вызова метода API.
listMovies.vue
Шаблон и сценарий
Он просто берет заданные данные, а затем передает их дочернему компоненту с именем movieItem.vue. Но здесь просто показано, как мы получаем данные из home.vue, а затем обрабатываем их в FOR LOOP. Это ясно говорит нам, что строка является адаптивной в зависимости от размера экрана. Вот как библиотека ElementUI принимает и действует в зависимости от заданной конфигурации, от размера экрана XL до XS. Полный код ЗДЕСЬ
<template>
<div>
<el-col
:span="12"
v-for="movie in listMoviesProp.docs"
:key="movie._id"
:xs="12"
:sm="10"
:md="8"
:lg="7"
:xl="6"
>
<movie-item v-bind:movie="movie"></movie-item>
</el-col>
</div>
</template>
<script>
import movieItem from './movieItem';
export default {
name: "listMovies",
props: ["listMoviesProp"],
components: {movieItem},
};
</script>
movieItem.vue
Шаблон
Необходимо разбить это на небольшие коды и объяснить по отдельности. Box-card, это имя элемента класса, к которому также относится ElementUI. Атрибут тени, указывающий, что у карты всегда была тень.
<el-card class="box-card" shadow="always">
После этого у нас есть заголовок, который содержит: название фильма, рейтинг и кнопку для отображения диалога. Каждый письменный элемент использует компоненты ElementUI, а также стоит упомянуть, что если вы хотите показать одну дробь от вашего числа, стоит использовать метод toFixed(0) из JS.
<div slot="header" class="clearfix">
<span>{{ movie.name }}</span>
<el-button @click="dialogVisible = true"
style="float: right; padding: 3px 0"
type="text">Read More</el-button>
<el-row><span>Rotten Tomatoes: {{ movie.rottenTomatesScore.toFixed(0) }}%</span></el-row></div>
Скрипт
3 Свойства определены в этом компоненте; данные, свойства и методы. Данные, вы уже знаете, что это необходимо в VUE.JS, если у нас есть локальные данные для использования, поэтому я объявил свойство, которое запускает диалоговое окно, чтобы показать, нажата ли карта, инициализировалось false, поэтому оно выиграло не показывать никаких диалогов. Props, который получает переданный объект из компонента listMovies.vue, о котором мы говорили. Методы, он содержит метод, который вызывает другое диалоговое окно, в котором спрашивается, уверен ли пользователь закрывать или нет, но он еще не использовался.
<script>
export default {
data() { return {
dialogVisible: false,
};},
props: ["movie"],
methods: {
handleClose(done) {
this.$confirm("Are you sure to close this dialog?")
.then((_) => {
done();
console.log(_);}).catch((_) => {
console.log(_);});},},};</script>
# Просмотр поиска
Цель этой страницы - отобразить возвращаемый результат, который был найден в этом API, вернуть имя и идентификатор объекта.
Как видите, мы разбили это представление на основное представление и один компонент TextField под названием Search.
Шаблон
В шаблоне мы определили две строки, которые содержат один компонент и объект рендеринга ответа в текст.
Скрипт
Данные, две переменные;
1- это объект, персонаж.
2- isLoading является логическим значением, помогает активировать индикатор. Методы onTermChange — это функция, которая получает один строковый параметр, передаваемый компонентом поиска. Эта функция просто реализует функцию GET, которая возвращает ответ, даже если ответ пуст или объект, который мы ожидаем, и в конце isLoading изменится на false, поэтому индикатор остановится.
Search.vue
Этот компонент работает как опускание данных из текстового ввода, которые передают информацию нашему предыдущему компоненту / представлению. Элемент el-input вызовет v-on, который будет передан в метод с именем searchInputMethod. Этот метод выдает данные под именем termChange, поэтому char.vue в шаблоне мы вызвали v-on:termChange для передачи данные.
О.vue
Последнее представление честно написано о том, как вы можете использовать ElementUI и как вы можете создать такую базовую страницу, которая показывает информацию о вас или что-либо, что вам нравится, с помощью этих карточек временной шкалы :) Код см. ЗДЕСЬ
Вывод
Мы подошли к концу, поэтому я хотел бы рассказать о том, что мы сделали до сих пор:
1- Как использовать излучение/свойство.
2- Как использовать маршрутизатор для основных функций.
3- Как использовать Axios и иметь один настроенный экземпляр, который можно использовать для всего проекта.
4- Как обрабатывать ошибки, передавать значения после получения ответа.
5- Как использовать функцию beforeMount.
6- Как использовать ElementUI.
Это так далеко. Тем не менее, проект может показаться небольшим, но он охватывает в основном основные аспекты Vue.js и дает хорошие основы для создания небольших проектов/компонентов для вашей работы.
Каков план ?
Сервер Aqueduct для серьезного Flutter:
1- Проект Идея и дизайн проекта.
2- Написать контроллеры и конфигурацию для сервера.
3- Спроектируйте БД и напишите модели.
4- Написать пакет для флаттера: модели и API.
5- Флаттер-приложение.
Пожалуйста, не стесняйтесь видеть мой GitHub, и если вы чувствуете, что мой контент стоит того, поделитесь им со всеми.
Я знаю, что этот контент бесплатный, но благодаря вашей поддержке я буду писать более творческий и полезный контент, поэтому, пожалуйста, купите мне кофе.
