Привет!
Недавно я узнал о возможностях Vue JS и о том, как его можно использовать для создания веб-приложений. И сегодня мы рассмотрим основные формальности Vue Js, и к сведению, это не учебник по Vue. Но вопрос в том,
Что, черт возьми, такое Vue JS?
Vue. js - одна из тех новых программных технологий, которые широко используются во всем мире для веб-разработки. Vue. js на самом деле представляет собой платформу JavaScript с различными дополнительными инструментами для создания пользовательских интерфейсов.
Некоторые особенности Vue JS:
- Это супер производительность. Это уменьшает размер как производственной, так и разрабатываемой версии примерно до 30 КБ и 280 соответственно.
- Он имеет простой синтаксис, который также легко использовать. Исходя из среды Javascript, вы сможете легко адаптироваться к ней, что делает ее универсальной.
- С ним легко согласиться, поскольку он использует простой синтаксис.
- Удивительно, но это самый популярный репозиторий на Github.
Зачем начинать развертывать Vue JS помимо JS Framework в своих веб-проектах?
Ну, он основан на HTML, CSS и JS, чтобы начать с ним работать. Кроме того, все, что вам нужно для начала работы и настройки, - это импортировать тег скрипта. Таким образом, это показывает, что ему не нужен Webpack, который является инструментом сборки.
‹Скрипт src =” https://cdn.jsdelivr.net/npm/vue/dist/vue.js ›‹/script›
И бум! Вы готовы создать свой первый «Компонент».
Как начать писать свое первое приложение?
В нем есть что-то, называемое синтаксисом усов, который, по сути, весь ваш код должен находиться между этими четырьмя фигурными скобками {{content}}
Вы начинаете с HTML-файла
Пример: app.html ‹section id =” app ”›
Здравствуйте, {{name}} // это синтаксис УСОВ
‹/section›
А затем файл JS. EX: app.js
var app = new Vue ({
data: {
name: ‘World’
}
})
Это почти все, что вам нужно, чтобы начать делать хорошие вещи.
Что еще я должен заметить?
Также вам потребуется маршрутизация и управление данными. Vue js включает основной модуль, который позволяет нам создавать компоненты. Кроме того, он имеет ряд библиотек, созданных самой командой Vue js, таких как Vue-router для части маршрутизации, Vuex для управления вашими данными, Vue-cli, который является стандартным инструментом для разработки Vue js. .
Итак, давайте построим роутер !!
Итак, сначала мы импортируем нашу назначенную страницу
импортировать страницу из ‘./components/page’;
экспортировать новый VueRouter по умолчанию ({
[
{путь: ‘/ page /: uid’, component: Page}
]
});
А теперь нам нужно заставить компоненты взаимодействовать друг с другом. Очень важным моментом в любом огромном веб-приложении является то, как сделать взаимодействие между компонентами гладким, чтобы управлять нашими данными.
Таааак, нам нужен Vuex, который представляет собой модуль, сделанный на основе Redux и архитектуры Elm. Он обеспечивает очень декларативный способ обработки действий в компонентах и отправки данных любому компоненту.
const store = new Vuex.Store ({
state: {
doc: null
},
мутации: {
setDocument (state, doc) {
state.doc = doc
}
},
действия: {
async queryDocument ({commit}, {customType, uid}) {
commit ('setDocument ', await Prismic.getByUID (customType, uid))
}
}
})
Наконец, нам нужно создать смешивание компонентов, которое сделает наши данные повторно используемыми и функциональными!
Пришло время объединить все в одном простом компоненте:
var app = new Vue ({
el: '#page,
beforeRouteUpdate (to, from, next) {
store.dispatch (' queryDocument ', {customType:' homepage ', uid : to.params.uid})
.then (следующий)
})
beforeRouteUpdate - это просто ловушка компонента, указывающая, когда ваш код должен выполняться при переключении маршрута.
Все, что нам сейчас нужно, это Vue-cli, инструмент командной строки, который поможет вам выполнить начальную загрузку простого проекта с уже настроенным инструментом сборки.
Может быть действительно полезно создать компонент в файле с расширением .vue, который позволяет вам поместить внутрь HTML, CSS и JavaScript, чтобы правильно определить область действия вашего компонента.
Это также полезно, потому что у вас есть прекрасные помощники, такие как babel, для обработки нового синтаксиса в JS, например async / await.
Это может показаться немного запутанным, но вы должны знать следующее:
- Прекратите сравнивать все фреймворки
- Выберите тот, который, по вашему мнению, после некоторого исследования, может прослужить дольше и может облегчить вам жизнь кодирования, и освоите язык.
- Никогда, никогда, никогда не переставай учиться; потому что всегда будет новый фреймворк.
И как сказал Эван Ю, основатель Vue Js Framework:
Мы можем постепенно увеличивать сложность фреймворка, только когда этого требует наследственная сложность проекта.
Спасибо, ребята, что прочитали, и я надеюсь, вам понравилось. Покажи мне свою любовь, нажав кнопку хлопка, чтобы она могла достучаться до более широкой аудитории.
Удачного обучения ..
Для контакта: Twitter - https://twitter.com/alanssinabil19
Ресурсы: должны быть добавлены ресурсы в виде ссылок на подчеркнутый текст!
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слышите самые интересные истории недели в области технологий, ожидающие в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .