Публикации по теме 'vue'
Шаблон Vue + Bootstrap
Я хотел использовать vue и bootstrap для первого запуска веб-фреймворка, но мне не удалось найти несколько примеров. Поэтому я сделал один сам.
# install vue-cli
$ npm install --global vue-cli
# init project
$ vue init webpack vue-bootstrap-template
? Project name erc20-contract
? Project description vue+bootstrap template
? Author chang < [email protected] >
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests..
3 ошибки при переходе с Vue на Nuxt
Я использую Nuxt.js для проекта, над которым работаю уже некоторое время. Работая с Vue.js ранее, было не так уж сложно разобраться в происходящем, но между Vue.js и Nuxt.js есть некоторые существенные различия, которые важно понимать. В этой статье я рассмотрю три основных отличия от Vue, которые я испытал, и раскрою особенности, на которых нужно сосредоточиться при входе в мир Nuxt и рендеринга на стороне сервера.
Рендеринг на стороне сервера
Для тех, кто совершенно не знаком с..
Понимание реактивности Vue
Давайте посмотрим, как javascript обновляет значение переменной
let name = 'Harry';
let fullName = name + ' Potter';
Если мы console.log(fullName); , мы получим Harry Potter Теперь, если обновим значение имени таким образом,
name = 'Harry James';
Можете ли вы догадаться, что результат console.log(fullName); будет таким же, как и раньше Harry Potter
Это связано с тем, что JavaScript по умолчанию не является реактивным. Vue позаботится о таких изменениях для нас, и это то, что..
Vue Lazy Routes и загрузка чанка не удалась
Ленивая загрузка маршрутов - популярный метод ускорения загрузки страницы за счет разделения файла сборки на множество фрагментов и загрузки его по запросу. Функция асинхронных компонентов Vue и функция разделения кода в webpack упростили отложенную загрузку компонентов маршрута.
Чтобы узнать больше об этой реализации, вы можете проверить мою предыдущую статью об этом здесь
Все выглядело отлично, пока я не столкнулся с одной конкретной проблемой, которая периодически возникала..
Vue, Google Maps и автозаполнение
Около 6 месяцев назад мне понадобились Google Карты в моем приложении Vue, и я не мог найти подходящий пакет; так что я сделал свой ( x5-gmaps ). Пользователи часто спрашивают, как включить адресный поиск, поэтому вот простое руководство по этому поводу.
Результат: Репозиторий (код)
ОБНОВЛЕНО: это реализация последней версии: https://codesandbox.io/s/search-implementation-b53zt
Настраивать
Очень простая настройка с использованием Vue CLI и предустановок по умолчанию..
Создайте собственный встроенный компонент значка SVG с помощью Vue.js.
Есть несколько различных стратегий, которые следует учитывать, когда вы сталкиваетесь с задачей добавления значков SVG в приложение на основе Vue.js. Добавление их в виде встроенных SVG — это лишь один из способов, который может дать немного больше контроля над цветом и размером.
Мы рассмотрим, как создать простой <app-icon /> функциональный компонент, который предлагает согласованный способ загрузки SVG во всем приложении.
Требования
Предполагая, что вы использовали Vue CLI..
Безголовые компоненты пользовательского интерфейса: создание логики многократного использования, не задумываясь о дизайне
Вступление
Безголовый компонент пользовательского интерфейса - это компонент, который предлагает максимальную визуальную гибкость, не предоставляя интерфейса. Это может звучать как предоставление шаблона пользовательского интерфейса без предоставления пользовательского интерфейса. Забавно, но это правда.
Я продемонстрирую этот шаблон с помощью React, но этот шаблон не является специфическим для React. Это просто шаблон, который помогает создавать повторно используемые компоненты..
