Одностраничные приложения (SPA) имеют мнжество преимуществ, таких как скорость, по-настоящему хороший UX, и полный контроль HTML-разметки. Становится всё больше и больше сайтов SPA; всё больше инструментов, которые упрощают процесс разработки SPA. Вы, вероятно уже читали о молодом и перспективном фреймворке Vue.js. Предлагаю вам глубже погрузиться в Vue и на конкретном примере разобраться с простым SPA.
Мы напишем клиент-серверное приложение простейшего блога. Приложение будет отображать список записей а также полный текст каждой отдельной записи. И само собой, всё это будет происходить без перезагрузки страницы.
Ознакомившись с примером этого приложения, вы научитесь извлекать данные в Vue, создавать роуты и разберётесь с интересной особенностью Vue — однофайловыми компонентами.Читать полностью »
Рубрика «vue.js» - 7
Как написать одностраничное приложение (SPA) с использованием Vue.js
2018-03-09 в 8:52, admin, рубрики: javascript, single page application, SPA, vue.js, vuejs, одностраничное приложение, Программирование, Разработка веб-сайтовVue.js + Asp.Net Core MVC + TypeScript и ещё Bootstrap4
2018-03-05 в 8:43, admin, рубрики: .net, ASP, asp.net core, asp.net mvc, Bootstrap, require.js, system.js, TypeScript, Visual Studio, vue, vue.js, vuejs, Разработка веб-сайтов
По стандартному шаблону Asp.Net Core MVC в Visual Studio 2017 создаем новый проект, переводим его на четвертый Bootsrtrap, встраиваем туда модульное приложение Vue.js на TypeScript.
Получаем простую, обозримую и легкую заготовку для создания своих веб-приложений на VS2017 с использованием Vue.js и TypeScript. Привычная среда разработки, в которой можно выполнять большую часть кодинга и отладки, а также быстрая пересборка приложения, делают работу вполне комфортной.
В генерации JavaScript-кода приложения принимает участие только штатный компилятор TypeScript и VS2017, что сильно сужает круг подозреваемых при возникновении глюков. А это, в свою очередь, — тоже большая экономия времени и нервов.
Материал рассчитан на способных управиться с VS2017 и знакомых с прогрессивным JavaScript фреймворком Vue.js.
Как из UML диаграммы получить каркас Vue.js приложения
2017-12-15 в 8:50, admin, рубрики: draw.io, javascript, UML, vue.js, vuejs, Разработка веб-сайтовЗдравствуйте, уважаемые читатели. Представляю вашему вниманию перевод статьи From Draw.io to Vue.js app автора Francesco Zuppichini.
Это моя первая публикация на Хабре и я решил начать с перевода статьи об одном классном инструменте, который позволяет сгенерировать Vue.js приложение из UML диаграммы.
Удивлены? Я был просто восхищен, когда наткнулся на него.
Конечно же, как и в любой бета версии, там есть над чем поработать. Например первым делом я связался с автором и сказал, что хочу внести исправления в структуру шаблона компонентов и именование путей. Автор вышел в течении часа на связь, выложил код на GitHub и написал небольшой туториал. После принятия PR было получено разрешение на перевод статьи, с указанием ссылки на оригинал.
Кому интересно — прошу под кат.
Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора
2017-12-07 в 9:27, admin, рубрики: angular, Dojo 2, ember, React, ReactJS, redux, vue.js, vuejs, Блог компании RUVDS.com, Веб-разработка, Разработка веб-сайтов, фреймворкНедавно на sitepen.com вышла серия статей, посвящённая фреймворкам для разработки веб-приложений. А именно, в этих материалах исследованы платформы Angular 2+, React + Redux, Vue.js, Dojo 2, Ember и Aurelia.
Сегодня мы хотим поделиться с вами переводом статьи из этой серии, в которой, подводя итоги всех публикаций, каждый из этих фреймворков анализируют по нескольким показателям. А именно, речь пойдёт о плюсах и минусах каждого из них, о том, что может ждать их в будущем, и о том, в каких обстоятельствах стоит обратить внимание на тот или иной фреймворк.
Читать полностью »
Что нового в WebStorm 2017.3
2017-12-06 в 10:52, admin, рубрики: angular, html, IDE, javascript, jetbrains, TypeScript, vue.js, webstorm, Блог компании JetBrains, Разработка веб-сайтовНа прошлой неделе вышло большое обновление WebStorm. Мы хотим рассказать о том, какие улучшения ждут JavaScript-разработчиков в WebStorm 2017.3 и в других IDE от JetBrains с поддержкой JavaScript.
Вы можете скачать WebStorm 2017.3 на нашем сайте.
Улучшения в поддержке Vue.js
В новой версии WebStorm мы улучшили поддержку Vue.js. В template-части .vue-файла теперь есть автодополнение и навигация к определению для props, свойств в data-объектах, computed свойств и имен методов, объявленных в script части.
Читать полностью »
Приложение реального времени на Vue.js
2017-11-28 в 9:51, admin, рубрики: javascript, pusher, vue.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПо мнению Дэвиса Керби, вице-президента Algoworks Solutions, автора этой статьи, фреймворк Vue.js набирает популярность в среде JavaScript-разработчиков благодаря своей простоте и той лёгкости, с которой можно начать работу с ним. Буквально несколько строк кода на Vue позволяют делать очень серьёзные вещи. Vue — это один из самых известных фреймворков, он находится в числе ведущих платформ для веб-разработки.
Современный пользователь Сети не любит ждать. Как быть, если на Vue нужно создать приложение для работы с некими данными в реальном времени? Дэвис отвечает на этот вопрос с помощью интеграции в приложение Vue.js 2.0. возможностей сервиса Pusher. В этом материале он, с самого начала, разберёт разработку такого приложения, названного Movie Review.
Читать полностью »
Веб-приложение на Node и Vue, часть 4: повторное использование кода
2017-11-16 в 10:05, admin, рубрики: javascript, mongodb, node.js, vue.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПеред вами четвёртая часть серии материалов, которые посвящены разработке веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой, второй и третьей частях речь шла о создании основных серверных и клиентских компонентов приложения. Сегодня мы продолжим развитие проекта, а именно — займёмся списками документов и клиентов. Кроме того, нельзя не заметить, что к настоящему моменту сделано уже немало, поэтому вполне можно критически взглянуть на то, что получилось, и поработать над повторным использованием кода.
Веб-приложение на Node и Vue, часть 3: развитие клиента и сервера
2017-11-10 в 9:10, admin, рубрики: javascript, mongodb, node.js, vue.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовСегодня публикуем третью часть из серии материалов, посвящённой разработке приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой и второй частях мы создавали сервер, настраивали механизмы аутентификации и занимались обустройством фронтенда. В этом материале продолжим работать над клиентской и серверной частями системы. То, что уже создано, пока почти не касается логики самого приложения, которое предназначено для работы с финансовыми документами. Поэтому, кроме прочего, мы займёмся и этим аспектом проекта.
Веб-приложение на Node и Vue, часть 2: компоненты, формы, маршруты
2017-10-26 в 10:01, admin, рубрики: javascript, node.js, vue.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПеред вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.
Веб-приложение на Node и Vue, часть 1: структура проекта, API, аутентификация
2017-10-23 в 11:28, admin, рубрики: javascript, mongodb, node.js, vue.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовПеред вами — первый материал из серии, посвящённой разработке полноценного веб-приложения, которое называется Budget Manager. Основные программные средства, которые будут использованы в ходе работы над ним — это Node.js для сервера, Vue.js для фронтенда, и MongoDB в роли базы данных.
Эти материалы рассчитаны на читателей, которые знакомы с JavaScript, имеют общее представление о Node.js, npm и MongoDB, и хотят изучить связку Node-Vue-MongoDB и сопутствующие технологии. Приложение будем писать с нуля, поэтому запаситесь любимым редактором кода. Для того, чтобы не усложнять проект, мы не будем пользоваться Vuex и постараемся сосредоточиться на самом главном, не отвлекаясь на второстепенные вещи.
Автор этого материала, разработчик из Бразилии, говорит, что ему далеко до JavaScript-гуру, но он, находясь в поиске новых знаний, готов поделиться с другими тем, что ему удалось найти.
Читать полностью »