Привет!

Недавно я узнал о возможностях Vue JS и о том, как его можно использовать для создания веб-приложений. И сегодня мы рассмотрим основные формальности Vue Js, и к сведению, это не учебник по Vue. Но вопрос в том,

Что, черт возьми, такое Vue JS?

Vue. js - одна из тех новых программных технологий, которые широко используются во всем мире для веб-разработки. Vue. js на самом деле представляет собой платформу JavaScript с различными дополнительными инструментами для создания пользовательских интерфейсов.

-Hackernoon.com

Некоторые особенности Vue JS:

  1. Это супер производительность. Это уменьшает размер как производственной, так и разрабатываемой версии примерно до 30 КБ и 280 соответственно.
  2. Он имеет простой синтаксис, который также легко использовать. Исходя из среды Javascript, вы сможете легко адаптироваться к ней, что делает ее универсальной.
  3. С ним легко согласиться, поскольку он использует простой синтаксис.
  4. Удивительно, но это самый популярный репозиторий на 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.

Это может показаться немного запутанным, но вы должны знать следующее:

  1. Прекратите сравнивать все фреймворки
  2. Выберите тот, который, по вашему мнению, после некоторого исследования, может прослужить дольше и может облегчить вам жизнь кодирования, и освоите язык.
  3. Никогда, никогда, никогда не переставай учиться; потому что всегда будет новый фреймворк.

И как сказал Эван Ю, основатель Vue Js Framework:

Мы можем постепенно увеличивать сложность фреймворка, только когда этого требует наследственная сложность проекта.

Спасибо, ребята, что прочитали, и я надеюсь, вам понравилось. Покажи мне свою любовь, нажав кнопку хлопка, чтобы она могла достучаться до более широкой аудитории.

Удачного обучения ..

Для контакта: Twitter - https://twitter.com/alanssinabil19

Ресурсы: должны быть добавлены ресурсы в виде ссылок на подчеркнутый текст!



3 причины использовать Vue.js в вашем следующем веб-проекте
Трудно выбрать фреймворк JavaScript, потому что их слишком много, а различия не ... tiny.cc



Http://tiny.cc/resource2

📝 Прочтите этот рассказ позже в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слышите самые интересные истории недели в области технологий, ожидающие в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .