Vue npm: Публикация Vue-компонентов в npm — Vue.js

Публикация | Vue CLI

Общие рекомендации

Если вы используете Vue CLI с бэкенд-фреймворком, который обрабатывает статические ресурсы, как часть своей публикации, всё что вам нужно сделать, это убедиться, что Vue CLI генерирует файлы сборки в правильном месте, а затем следуйте инструкциям по публикации вашего бэкенд-фреймворка.

Если вы разрабатываете фронтенд вашего приложения отдельно от бэкенда — т.е. ваш бэкенд предоставляет только API с которым вы работаете, то по сути ваш фронтенд является чисто статическим приложением. Вы можете публиковать собранный контент в каталоге dist на любой статический файловый сервер, главное не забудьте установить правильный publicPath.

Локальный предпросмотр

Каталог dist предназначен для обслуживания HTTP-сервером (если не задали publicPath относительным значением), поэтому не сработает если напрямую открыть dist/index.html через file:// протокол. Самый простой способ предпросмотра вашей сборки для production локально — использовать статический файловый сервер Node.js, например serve:

Маршрутизация через

history.pushState

Если вы используете Vue Router в режиме history, простой статический файловый сервер не подойдёт. Например, если вы использовали Vue Router для маршрута /todos/42, то сервер разработки уже был настроен для корректного ответа на запрос localhost:3000/todos/42, но простой статический сервер используемый с production-сборкой будет отвечать ошибкой 404.

Чтобы это исправить, необходимо настроить production сервер так, чтобы index.html возвращался для любых запросов, не соответствующих статическим файлам. В документации Vue Router есть примеры конфигурации различных серверов.

CORS

Если ваш статический фронтенд публикуется на домен, отличный от домена API бэкенда, то вам необходимо правильно сконфигурировать CORS.

PWA

Если вы используете плагин PWA, ваше приложение необходимо публиковать по HTTPS адресу, чтобы Service Worker смог корректно зарегистрироваться.

Руководства для платформ

GitHub Pages

Публикация обновлений вручную

1. Установите корректное значение publicPath в vue.config.js.

   Если вы публикуете по адресу https://<USERNAME>.github.io/, вы можете опустить publicPath, так как оно по умолчанию "/".

   Если вы публикуете по адресу https://<USERNAME>.github.io/<REPO>/, (т.е. ваш репозиторий находится по адресу https://github.com/<USERNAME>/<REPO>), установите publicPath в значение "/<REPO>/". Например, если ваш репозиторий называется «my-project», то ваш vue.config.js будет выглядеть примерно так:

2. Внутри вашего проекта создайте deploy.sh со следующим содержимым (при необходимости раскомментировав подсвеченные строки) и запустите его для публикации:

Использование Travis CI для автоматических обновлений

1. Установите правильный publicPath в vue. config.js, как описано выше.

2. Установите клиент Travis CLI: gem install travis && travis --login

3. Сгенерируйте токен доступа на GitHub с правами доступа к репозиторию.

4. Разрешите доступ Travis к репозиторию: travis env set GITHUB_TOKEN xxx (xxx — это персональный токен доступа из шага 3.)

5. Создайте файл .travis.yml в корневом каталоге проекта.

6. Добавьте файл .travis.yml в репозиторий, чтобы запустить первую сборку.

GitLab Pages

Как описано в документации GitLab Pages, всё происходит с файлом .gitlab-ci.yml, расположенным в корневом каталоге проекта. Вы можете начать с этого рабочего примера:

Как правило, по адресу https://yourUserName.gitlab.io/yourProjectName будет располагаться статический веб-сайт, поэтому потребуется создать файл vue.config.js для указания значения BASE_URL, соответствующего имени проекта (переменная окружения CI_PROJECT_NAME содержит его):

Изучите документацию по настройке домена в GitLab Pages для получения дополнительной информации об URL-адресе, где ваш веб-сайт будет размещён. Имейте ввиду, что можно также использовать собственный домен.

Закоммитьте оба файла .gitlab-ci.yml и vue.config.js перед push в ваш репозиторий. Будет запущен GitLab CI pipeline: при успешном выполнении, откройте Settings > Pages в вашем проекте, чтобы увидеть ссылку на свой сайт и нажмите на неё.

Netlify

1. На сайте Netlify добавьте новый проект из GitHub со следующими настройками:

• Build Command: npm run build или yarn build
• Publish directory: dist

2. Нажмите кнопку публикации!

Также посмотрите vue-cli-plugin-netlify-lambda.

Для получения прямых хитов при использовании режима history во Vue Router, необходимо создавать файл _redirects в каталоге /public со следующим содержимым:

Подробнее можно изучить в документации Netlify по перенаправлениям.

При использовании @vue/cli-plugin-pwa убедитесь, что файл _redirects не кэшируется service worker.

Для этого добавьте в vue.config.js следующее:

Подробнее об опциях workboxOptions и exclude.

Render

Render предлагает бесплатный хостинг статических сайтов с полностью управляемым SSL, глобальным CDN и непрерывным автоматическим развёртыванием из GitHub.

1. Создайте новый Web Service в Render, и предоставьте доступ для GitHub-приложения Render в репозиторий.

2. При создании используйте следующие значения:

• Окружение: Static Site
• Команда сборки: npm run build или yarn build
• Каталог публикации: dist

Всё! Приложение будет доступно по URL-адресу Render сразу, как только завершится сборка.

Для того, чтобы получать прямые хиты при использовании режима history во Vue Router, необходимо добавить следующее правило на вкладке Redirects/Rewrites вашего сайта.

• Источник: /*
• Назначение: /index.html
• Статус Rewrite

Узнайте больше о настройке перенаправлений, перезаписей и пользовательских доменах на Render.

Amazon S3

Плагин vue-cli-plugin-s3-deploy.

Firebase

Создайте новый проект Firebase в консоли Firebase. Рекомендуем изучить документацию о том, как настроить проект.

Убедитесь, что у вас глобально установлены firebase-tools:

Из корня вашего проекта инициализируйте firebase с помощью команды:

Firebase задаст несколько вопросов о том, как настроить проект.

• Выберите функции Firebase CLI, которые хотите настроить для проекта. Убедитесь, что выбрали hosting.
• Выберите проект Firebase по умолчанию для вашего проекта.
• Установите каталог public в значение dist (или куда генерируется итоговая сборка), который будет загружаться на Firebase Hosting.

• Выберите yes чтобы настроить проект как одностраничное приложение. Это создаст index.html и в вашем каталоге dist и добавит настройки в hosting.

Запустите npm run build для сборки вашего проекта.

Для публикации вашего проекта на Firebase Hosting выполните команду:

Если вы хотите использовать другие возможности Firebase CLI, которые вы используете в своём проекте для публикации, запустите firebase deploy без опции --only.

Теперь можно открыть проект по адресу https://<YOUR-PROJECT-ID>.firebaseapp.com или https://<YOUR-PROJECT-ID>.web.app.

Обратитесь к документации Firebase для получения более подробной информации.

Vercel

Vercel — облачная платформа, позволяющая разработчикам хостить Jamstack веб-сайты и веб-сервисы, которые публикуются мгновенно, автоматически масштабируются и не требуют никакого контроля, всё это с zero-конфигурацией. Они обеспечивают глобальный доступ, SSL-шифрование, сжатие ресурсов, инвалидацию кэша и многое другое.

Шаг 1: Публикация проекта Vue на Vercel

Для публикации проекта Vue с помощью Vercel для интеграции с Git, убедитесь, что он был выложен в Git-репозиторий.

Импортируйте проект в Vercel с помощью Import Flow. Во время импорта будут запрошены все соответствующие опции, предварительно сконфигурированные, но с возможностью изменения при необходимости.

После импорта проекта, все последующие push в ветку будут генерировать публикации для предпросмотра, а все изменения внесённые в ветку Production (обычно «master» или «main») будут приводить к публикации Production.

После публикации вы получите URL-адрес для просмотра приложения вживую, например: https://vue-example-tawny.vercel.app/.

Шаг 2 (опционально): Использование пользовательского домена

При необходимости использовать пользовательский домен при публикации Vercel, можно Добавить или Перенаправить домен через настройки домена аккаунта Vercel.

Для добавления домена в проект, перейдите в раздел Проект на панели Vercel. После выбора проекта перейдите на вкладку «Настройки», затем выберите пункт меню Домены. На странице Домен вашего проекта, укажите домен которые хотите использовать в проекте.

После добавления домена, будут предоставлены различные методы его настройки.

Публикация свежего проекта на Vue

Для публикации свежего проекта на Vue с настроенным Git-репозиторием, можно с помощью кнопки Deploy ниже:

Ресурсы:

Stdlib

TODO | Присылайте пулл-реквесты.

Heroku

1. Установите Heroku CLI

2. Создайте файл static.json:

3. Добавьте файл static.json в git

4. Запустите публикацию на Heroku

Подробная информация: Начало работы с SPA на Heroku

Surge

Публикация с помощью Surge очень проста.

Сначала, вам потребуется собрать проект командой npm run build. И, если вы не установили утилиту Surge для командной строки, то вы можете сделать это командой:

Затем перейдите в каталог dist/ вашего проекта, запустите surge и следуйте подсказкам на экране. Вас попросят указать электронную почту и пароль, если вы впервые используете Surge. Подтвердите каталог проекта, введите нужный домен и посмотрите как публикуется ваш проект, как примерно выглядит ниже.

Убедитесь, что ваш проект успешно опубликован с помощью Surge открыв в браузере myawesomeproject.surge.sh! Дополнительные сведения о настройке, такие как конфигурация пользовательских доменов, можно найти на странице справки Surge.

Bitbucket Cloud

1. Как описывается в документации Bitbucket вам необходимо создать репозиторий названный в точности <USERNAME>.bitbucket.io.

2. Возможно публиковать в подкаталог, например, если требуется иметь несколько веб-сайтов. В этом случае укажите корректный publicPath в файле vue. config.js.

   Если публикуете по адресу https://<USERNAME>.bitbucket.io/, установку publicPath можно опустить, поскольку значение по умолчанию "/".

   Если публикуете по адресу https://<USERNAME>.bitbucket.io/<SUBFOLDER>/, нужно задать publicPath в значение "/<SUBFOLDER>/". В этом случае структура каталогов должна отражать структуру URL-адресов, например, репозиторий должен иметь каталог /<SUBFOLDER>.

3. В проекте создайте deploy.sh с указанным содержимым и запустите его для публикации:

Docker (Nginx)

Опубликуйте ваше приложение, используя nginx внутри docker контейнера.

1. Установите docker

2. Создайте файл Dockerfile в корневом каталоге проекта

3. Создайте файл .dockerignore в корневом каталоге проекта

   Настройка файла .dockerignore предотвращает копирование node_modules и любых промежуточных артефактов сборки в образ, что может вызывать проблемы при сборке.

4. Создайте файл nginx.conf в корневом каталоге проекта

   Nginx — это HTTP(s)-сервер, который будет работать в вашем контейнере docker. Он использует конфигурационный файл для определения того как предоставлять содержимое / какие порты прослушивать / и так далее. См. документацию по конфигурации nginx для ознакомления со всеми возможными примерами конфигураций.

   Ниже приведена простая конфигурация nginx, которая обслуживает ваш vue-проект на порту 80. Корневой index.html служит для page not found / 404 ошибок, что позволяет использовать маршрутизации, основанной на pushState().

5. Соберите образ docker

6. Запустите образ docker

   Эта сборка основана на официальном образе nginx, поэтому перенаправление логов уже настроено и само-демонтизация (self daemonizing) отключена. Для улучшения работы nginx в контейнере docker были установлены некоторые другие настройки по умолчанию. Подробнее см. в репозитории nginx docker.

Быстрый старт с Vue.js

В этом видео мы начнем разбираться с Vue.js. Vue — это javascript фреймворк для создания одностраничных приложений. То есть, можно сказать, что это аналог Angular либо React конечно же со своими плюсами и минусами. Я бы даже сказал, что шаблоны похожи очень сильно на первый ангуляр, а javascript логика на реакт или ембер. Также, core часть библиотеки в сжатом виде занимает 17kb. Конечно, это без роутера, хранилища состояния и других нужных частей, но даже с ними фреймворк достаточно легковесный.

Как мы можем начать использовать vue?

1. Самый простой вариант, это подключить скрипт с vue с cdn к html странице
2. Также можно установить с помощью npm пакета и потом собрать чем угодно, например с помощью webpack
3. Также vue можно установить с помощью bower.
4. Ну и самый нормальный вариант для небольших проектов, это Vue-cli.

Поэтому мы с вами и будем использовать Vue-cli. Он дает возможность в консоли развернуть новый проект с готовыми базовыми настройками. Если сравнивать с React, то это что-то, похожее на create-react-app.

Итак, для начала нам нужно глобально установить vue-cli. Для установки достаточно написать

npm install -g vue-cli

Если вы используете npm.

Для генерации нового проекта использующего webpack теперь достаточно написать

vue init webpack vue-test

При этом установщик спросит базовые вопросы насчет названий, хотите ли вы eslint и тесты. На все можно просто жать enter и no.

Ответив на все вопросы получаем сообщение, что проект был сгенерирован.

Теперь нужно установить все пакеты командой

npm install

После установки пакетов для запуска проект в девелопмент моде пишем

npm run dev

Для продакшена

npm run build

После запуска проекта получаем сообщение, что проект запущен на localhost:8080.

Наш базовый проект развернут, и готов к работе.

Итак давайте посмотрим на структуру нашего проекта.

В корне у нас лежит index.html. В нем находится div, в который вставляется vue приложение. Все собраные файлы будут также вставлятся сюда автоматически.

В папке src у нас есть файл main.js, в котором инициализируется Vue приложение. Здесь мы импортируем vue из node_modules и App, который является основным компонентом приложения. Дальше мы создаем экземпляр класса Vue с нужными опциями. el — это DOM элемент, куда будет рендериться Vue. В template мы выводим наш компонент App и для того, чтобы он был доступен в шаблоне передаем его в components.

Теперь давайте посмотрим на App.vue. Все компоненты в vue имеют расширение .vue и состоят из трех частей: шаблона, скрипта и стилей.

Давайте сначала разберемся с скриптом. Внутри тега script мы импортируем HelloWorld компонент. Дальше мы экспортируем обьект, где указываем имя нашего компонента и в components передаем компонент Hello, так как мы используем его в шаблоне.

В стилях мы просто пишем стили, относящиеся к нашему компоненту.

Если мы посмотрим на компоненту HelloWorld, которая находится в components, то там такая же структура. Единственное отличие в том, что в обьекте, который мы возвращаем есть метод data, который возвращает обьект.

Data — это грубо говоря модель или состояние компонента. Например, в данном случае у нас в data есть поле message и оно нам сразу же доступно в шаблоне и мы его выводим.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Проект VueJs-Vue-cli и npm run build

Поэтому в настоящее время я создаю приложение vuejs с использованием Vue-cli и webpack. Мой сайт сильно зависит от базы данных Firebase, поэтому в моем файле main.js у меня есть следующий код:

new Vue({
  el: '#app',
  router,
  ...layout,
  store,

  created () {
    firebase.initializeApp({
      apiKey: MYKEY,
      authDomain: 'foo. firebaseapp.com',
      databaseURL: 'https://foo.firebaseio.com',
      projectId: 'foo'
    })
  }

Это отлично работает, однако я хотел бы использовать другую базу данных Firebase при работе в реальном времени (производство).

Поэтому, когда я запускаю ‘npm run build’, я хотел бы изменить код firebase.initializeApp на что-то вроде этого:

    firebase.initializeApp({
      apiKey: MYKEY-PRODUCTION,
      authDomain: 'production.firebaseapp.com',
      databaseURL: 'https://production.firebaseio.com',
      projectId: 'production'
    })

Как правильно это сделать с помощью VUE-CLI?

Я с нетерпением жду вашей помощи, ребята.

firebase

firebase-realtime-database

webpack

vue.js

vue-cli

Поделиться

Источник

Richy    

11 февраля 2018 в 17:35

2 ответа

• Как дублировать проект VueJS?

  При попытке просто дублировать весь проект VueJS с помощью cp -r project clone_project я получаю следующую ошибку при запуске npm run serve из каталога clone_project : > design@0. 1.0 serve /Users/path_to_clone_project/clone_project > vue-cli-service serve internal/modules/cjs/loader.js:613…

• проект vue cli отсутствует сборка и конфигурация веб-пакета

  Я установил проект vue-cli и запустил приложение. Мне нужно ввести некоторые правила в конфигурацию веб-пакета. Он должен был быть в папке сборки. Но я не вижу никакой папки сборки в корневой папке моего проекта. Нужно ли вручную добавлять папку сборки и писать конфигурацию веб-пакета? Или его…

1

Перейдите в папку config, расположенную в корне вашего проекта. Вы должны увидеть два файла: dev.env.js и prod.env.js

В этих файлах вы можете определить переменные. Итак, определите переменную firebaseConfig в prod.env.js :

module.exports = {
  NODE_ENV: '"production"',
  firebaseConfig: {
    apiKey: MYKEY-PRODUCTION,
    authDomain: 'production.firebaseapp. com',
    databaseURL: 'https://production.firebaseio.com',
    projectId: 'production'
  }
}

И сделайте то же самое в dev.env.js с вашим проектом ‘foo’.

Затем в компоненте vuejs напишите :

firebase.initializeApp(process.env.firebaseConfig)    

В результате, когда вы запускаете npm run dev, firebaseConfig будет иметь содержимое вашего файла dev .env.js.

А когда вы запускаете npm запускаете build … содержимое build .env.js

Поделиться

Istopopoki    

14 февраля 2018 в 09:13

0

Myfirebase -хорошая отправная точка для использования firebase с vuejs, она делает много предварительной настройки для вас за кулисами.

Поделиться

Houssain Amrani    

13 февраля 2018 в 18:26

Похожие вопросы:

Vuejs + webpack: npm запуск сборки медленный

Я изучаю webpack и Vuejs. Я следовал простым инструкциям в https:/ / vuejs-templates.github.io/webpack/ , и это работает. Однако, когда я запускаю npm run build , чтобы сделать производственную…

По умолчанию vue Cli имеет консольные ошибки?

Я пытаюсь создать проект с помощью vue Cli, используя следующие строки, $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev А в консоли сборки он имеет…

npm install -g @vue/cli @vue/cli-init ошибки

Я занят настройкой NativeScript, а также добавляю для него поддержку Vue.js. Ну, я получаю эту ошибку при установке. Должен ли я использовать —unsafe-perm Или есть лучший способ сделать это? npm…

Как дублировать проект VueJS?

При попытке просто дублировать весь проект VueJS с помощью cp -r project clone_project я получаю следующую ошибку при запуске npm run serve из каталога clone_project : > [email protected] serve…

проект vue cli отсутствует сборка и конфигурация веб-пакета

Я установил проект vue-cli и запустил приложение. Мне нужно ввести некоторые правила в конфигурацию веб-пакета. Он должен был быть в папке сборки. Но я не вижу никакой папки сборки в корневой папке…

npm install -g vue-cli -> coffeescript перемещено

Я пытался установить его, используя много версий nodejs / npm , на многих разных хостах, включая образ docker: Sending build context to Docker daemon 2.048kB Step 1/4 : FROM node:slim —>…

Установите vue/cli и vue/cli-service-global через package.json?

Каждый раз, когда я устанавливаю/строю свой проект vue.js с нуля (например, в новом/свежем git clone) Я исполняю: npm install -g @vue/cli npm install -g @vue/cli-service-global npm install Есть…

Vue CLI ошибка создания нового проекта (npm ошибка)

Пожалуйста, помогите мне в этом. Я не могу создать новый проект Vue CLI. Это раньше хорошо работало! Теперь не работает… Вью CLI v4.2.3 ✨ Создание проекта в /Web Development/Vue Projects/new….

Библиотека Vuejs CLI v3 Exclude

Я использую vuejs CLI версии 3 и строю свою библиотеку, используя эту цель в package. json vue-cli-service build —report-json —target lib —name components src/appup-components.js Эта библиотека…

npm запуск сервера выдает ошибку sh: 1: vue-cli-service: не найден

Я пытаюсь настроить существующий проект vue и получаю эту ошибку admin@kali:/media/veracrypt1/themeforest-LSerfC0M-skote-vuejs-admin-dashboard-template/Admin$ npm run serve > [email protected] serve…

использование проекта для добавления компонентов в приложение

От автора: в этой статье мы рассмотрим, как интегрировать Bootstrap Vue js с помощью Bootstrap-Vue. React и Vue.js — две ведущие современные JavaScript-системы для разработки интерфейса. В то время, как React имеет крутую кривую обучения, сложный процесс сборки (если вы выходите из мира jQuery), все, что вам нужно сделать, чтобы начать использовать Vue.js — это просто импортировать скрипт.

<script src=»//unpkg.com/[email protected]/dist/vue.js»></script>

Bootstrap стал популярным фреймворком HTML / CSS для создания мобильных адаптивных сайтов. Однако для своих основных функций он, как правило, использует jQuery, а также обширный список компонентов, таких как оповещения и модальные элементы. Поэтому мы рассмотрим, как использовать Bootstrap с Vue.js, тем самым устраняя необходимость в jQuery.

Введение в Bootstrap

Разработанный в конце 2011 года Марком Отто и Джейкобом Торнтоном из Twitter Inc., Bootstrap вскоре стал популярен за пределами Twitter после того, как был выпущен с открытым исходным кодом. Он продолжал развиваться, как самый быстрый интерфейс для веб-разработчиков по всему миру.

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Сегодня Bootstrap стал де-факто стандартом для запуска нового проекта веб-сайта, с его архитектурой CSS и JS, обеспечивающей мобильные адаптивные компоненты пользовательского интерфейса, а также поддержку большинства современных браузеров.

Связывание Bootstrap с Vue.js

Как мы упоминали ранее, использование с Bootstrap с Vue.js несколько сложно, из-за сильной зависимости динамических компонентов Bootstrap от jQuery. Однако есть, по крайней мере, несколько хороших проектов (очень ранние сборки, поэтому не ожидайте, что все будет проверено), которые находятся в процессе преодоления этого разрыва: Bootstrap-Vue, VueStrap.

Мы рассмотрим первый из них, Bootstrap-Vue, так как это самый популярный проект.

Bootstrap-Vue

Bootstrap-Vue поддерживает не только компоненты Bootstrap и систему сеток, но также включает поддержку Vue.js Directives, что дает нам полный набор функций из экосистемы Vue.js.

Одной из замечательных особенностей Bootstrap-Vue является то, что у него есть онлайн Playground. Эта площадка является перезагружаемой, а также позволяет экспортировать код в JSFiddle. Разве это не круто!

Я считаю, что для успеха любого программного проекта необходима хорошая документация и экосистема разработчиков, и у Bootstrap-Vue все в порядке по обоим пунктам.

Начало работы с Bootstrap-Vue с использованием командной строки

Если вы следуете современным тенденциям в области веб-разработки, вы наверняка знаете о npm и установке библиотек с его помощью. Bootstrap-Vue можно установить через npm с помощью следующей команды:

Bootstrap-Vue также предоставляет два шаблона vue-cli, которые могут использоваться для разработки:

Webpack Simple: быстрое решение для небольшого приложения.

Webpack: для проектов с широким функционалом.

Сначала мы устанавливаем vue-cli:

Затем мы инициализируем проект — давайте назовем его getting-started — используя простой веб-пакет, введя в терминале следующее:

$ vue init bootstrap-vue/webpack-simple getting-started

$ cd getting-started
$ npm install
$ npm run dev

Давайте разберем этот код по строкам:

Первая строка начинается с того, что vue init создает новый каталог с именем get-started, где инициализируется новый проект Bootstrap-Vue.

При запуске cd мы получаем доступ к каталогу нового проекта.

npm install отвечает за установку всех зависимостей проекта.

Наконец, с помощью npm run dev приложение компилируется и запускается в браузере.

Теперь ваша локальная среда должна содержать следующие файлы и папки:

├── index.html
├── node_modules
├── README.md
├── package.json
├── src
│ ├── App.vue
│ ├── assets
├── logo.png
│ ├── main.js
└── webpack.config.js

Здесь в первую очередь стоит обратить внимание на файлы App.vue и main.js. Если мы запустим текстовый редактор и откроем main.js, мы увидим следующий код, который импортирует таблицу стилей Bootstrap и Bootstrap-Vue:

import Vue from ‘vue’
import BootstrapVue from «bootstrap-vue»
import App from ‘. /App.vue’
import «bootstrap/dist/css/bootstrap.min.css»
import «bootstrap-vue/dist/bootstrap-vue.css»

Vue.use(BootstrapVue)

new Vue({
el: ‘#app’,
render: h => h(App)
})

В то же время в документе App.vue загружается внешний код. После запуска команды dev npm run, страница проекта index.html должна отобразить страницу, как показано ниже:

Импорт Bootstrap-Vue с помощью тега script в разделе head

Мы рассмотрели способ установки и работы с Bootstrap-Vue через npm, давайте также рассмотрим более простой вариант: включение Bootstrap-Vue, используя тег script в разделе head HTML-документа:

<!— Add Bootstrap, Bootstrap-Vue CSS, Vue,
Babel, and Bootstrap-Vue JS to the <head> section —>
<link type=»text/css» rel=»stylesheet» href=»//unpkg. com/bootstrap/dist/css/bootstrap.min.css»/>
<link type=»text/css» rel=»stylesheet» href=»//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css»/>

<script src=»//unpkg.com/[email protected]/dist/vue.js»></script>
<!— Add this after vue.js —>
<script src=»//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js»></script>
<script src=»//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js»></script>

Теперь мы можем работать с Vue.js, Bootstrap и Vue-Bootstrap на локальной машине.

Работа с компонентами Bootstrap-Vue

Для целей демонстрации в этой статье мы будем использовать CodePen. Чтобы настроить его, давайте создадим Pen, после этого нажмите иконку настроек и импортируйте следующий CSS на вкладку CSS:

//unpkg.com/[email protected]/dist/css/bootstrap.min.css
//unpkg.com/[email protected]/dist/bootstrap-vue.css

На вкладке Javascript давайте импортируем библиотеки Vue и Bootstrap Vue:

//unpkg.com/[email protected]/dist/vue.min.js
//unpkg. com/[email protected]/dist/bootstrap-vue.js

После этого нажмите кнопку Save & Close. Теперь мы готовы начать работать с компонентами Bootstrap-Vue.

Создание компонента оповещения Bootstrap-Vue

Чтобы создать компонент оповещения Bootstrap-Vue, мы добавим следующее в раздел CodePen HTML:

<div>
<b-alert show> Hello {{ name }}! </b-alert>
</div>

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Затем добавим экземпляр Vue в раздел JS:

window. onload = function() {
new Vue({
el: ‘#app’,
data: {
name: ‘Sitepoint’
},
})
}

В результате мы увидим оповещение «Hello Sitepoint!» в области просмотра результата:

В приведенном выше коде отображается простой компонент оповещения Bootstrap с использованием Vue.js и Bootstrap-Vue. Затем мы изменим некоторые параметры этого блока оповещения, чтобы сделать его более интересным. Например, чтобы сделать блок оповещения скрываемым, добавим ключевое слово dismissible после директивы show:

<b-alert show dismissible> Hello {{ name }}! </b-alert>

Теперь в оповещении отображается кнопка закрытия, которая при нажатии удаляет оповещение со страницы. Попробуйте сами! Информацию о других параметрах конфигурации вы можете найти в официальной документации по оповещениям Bootstrap-Vue.

Создание динамического компонента списка с помощью Bootstrap-Vue

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

Bootstrap-Vue предоставляет два компонента, которые вместе помогают нам создавать списки: <b-list-group> и <b-list-group-item>. Мы можем представить себе первый, как эквивалент HTML-тега ul или ol, а второй — как элемент li.
Начнем с создания статического списка определенных смартфонов:

<div>
<b-list-group>
<b-list-group-item href=»//apple.com»>iPhone</b-list-group-item>
<b-list-group-item>OnePlus 3T</b-list-group-item>
<b-list-group-item>Samsung Galaxy 8</b-list-group-item>
</b-list-group>
</div>

Теперь добавим экземпляр Vue в панель JavaScript:

window.onload = function() {
new Vue({
el: ‘#app’
})
}

И вот наш простой список:

Однако это далеко не динамический список. Давайте добавим внутри разметки компонента списка директиву Vue.js v-for, чтобы отобразить несколько элементов списка из массива:

<b-list-group-item v-for=»item in items»>
{{ item.message }}
</b-list-group-item>

Затем добавим массив items в экземпляр Vue:

new Vue({
el: ‘#app’,
data: {
items: [
{ message: ‘Nokia 8’ },
{ message: ‘OnePlus 5T’ },
{ message: ‘Samsung Galaxy S9’ }
]
}
})

И вот информация о наших смартфонах, отображаемая в компоненте списка Bootstrap-Vue:

Поэкспериментируйте с онлайн демо-версией.

Попробуйте сделать этот список еще более динамическим, добавив вызов Ajax для загрузки контента из API или из RSS.

Прослушивание событий в бейджах Bootstrap

Bootstrap содержит компонент бейдж, который полезен для хранения ряда элементов или их маркировки. Например, в приведенном выше примере списка мы могли бы добавить в элемент списка iPhone бейдж, указывающий количество вариантов (5 версий iPhone). С помощью Bootstrap-Vue мы можем использовать компонент <b-badge> в качестве дочернего элемента <b-list-group-item>, чтобы указать количество различных типов iPhone следующим образом:

<b-list-group-item href=»//apple.com»>iPhone <b-badge>5</b-badge></b-list-group-item>

В результате список должен выглядеть следующим образом:

Теперь давайте добавим на нашу страницу кнопку, чтобы отслеживать количество поделившихся ссылкой. Для этого мы можем использовать компонент <b-button> для создания кнопки Bootstrap, и внутри кнопки мы введем дочерний элемент <b-badge>:

<div>
<b-button variant=»primary» size=»sm»>
Share on Twitter <b-badge variant=»light»>{{ share_count }}</b-badge>
</b-button>
</div>

Мы изменяем код JavaScript, добавляя переменную share_count, которая будет отслеживать количество раз, когда кто-то поделился ссылкой на страницу:

new Vue({
el: ‘#app’,
data: {
share_count:0
}
})

Это должно дать нам следующий результат:

Обратите внимание: кнопка все еще не динамическая, то есть она не будет увеличивать счетчик, когда мы нажимаем кнопку «Поделиться в Twitter», так как мы еще не добавили для кнопки прослушивание событий. Мы будем использовать директиву Vue.js v-on для прослушивания события нажатия кнопки:

<b-button variant=»primary» size=»sm» v-on:click=»share_count += 1″>

Этот код увеличивает на 1 значение переменной share_count всякий раз, когда мы нажимаем кнопку, код для бейджа менять не нужно, так как он уже привязан к переменной share_count. Поэтому, всякий раз, когда нажимается кнопка, значение переменной share_count увеличивается, а также изменяется и бейдж. В этом преимущество привязки данных Vue.js!

Заключение

В этом руководстве мы рассмотрели, как использовать Bootstrap-Vue для добавления компонентов, подобных Bootstrap, в приложения Vue.js. Теперь дело за вами: создайте следующую потрясающую веб-страницу Bootstrap-Vue и поделитесь ею с миром!

Автор: Zeeshan Chawdhary

Источник: //www. sitepoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Vue.js | Введение и первое приложение

Что такое Vue.js. Первое приложение

Последнее обновление: 29.08.2017

Vue.js представляет современный прогрессивный фреймворк, написанный на языке JavaScript и предназначенный для создания веб-приложений клиентского уровня.
Основная сфера применения данного фреймворка — это создание и организация пользовательского интерфейса.

Первый релиз фреймворка увидел свет в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично
развивается, его текущей версией является версия 2. 3.

Официальный сайт фреймворка — https://vuejs.org/, где можно найти непосредственно файлы фреймворка, а также
сопроводительные материалы и документацию. Кроме того, сам проект доступен на github по адресу https://github.com/vuejs/vue.

Vue.js имеет довольно небольшой размер — не более 20 кБ, и при этом обладает хорошей производительностью по сравнению с такими фреймворками как
Angular или React. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.

Одним из ключевых моментов в работе Vue.js является виртуальный DOM. Структура веб-страницы, как правило, описывается с помощью DOM (Document Object Model), которая представляет организацию
элементов html на странице. Для взаимодействия с DOM (добавления, изменения, удаления html-элементов) применяется JavaScript.
Но когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со
снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут
занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с
объектами JavaScript, то операции производились бы быстрее.

Для этого Vue.js использует виртуальный DOM. Виртуальный DOM представляет легковесную копию обычного DOM. Если приложению
нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если данные, которые используются в приложении Vue.js,
изменяются, то изменения вначале вносятся в виртуальный DOM. Потом Vue выбирает минимальный набор компонентов, для которых надо выполнить изменения на
веб-странице, чтобы реальный DOM соответствовал виртуальному. Благодаря виртуальному DOM повышается производительность приложения.

Vue.js поддерживается всеми браузерами, которые совместимы с ECMAScript 5. На данный момент это все современные браузеры, в том числе IE11.

Первое приложение

Создадим первое приложение на Vue. js. Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Все необходимые материалы для загрузки можно найти по адресу
https://vuejs.org/v2/guide/installation.html. С этой страницы можно загрузить файл фреймворка локально (доступен в двух вариантах:
Production и Development).

Вместо использования локального файла мы можем загружать фреймворк из CDN по ссылке:

https://unpkg.com/vue

Либо если используется Node.js, то можно установить Vue.js через пакетный менеджер npm с помощью команды:

npm install vue

В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div>
    <input type="text" v-on:input="setMessage" />
    <p>{{message}}</p>
</div>
<script src="https://unpkg. com/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            setMessage: function(event){
                this.message = event.target.value;
            }
        }
    })
</script>
</body>
</html>

Для создания объекта приложения в Vue.js применяется объект Vue. Этот объект, во-первых, определяет
корневой элемент приложения на веб-странице с помощью параметра el:

el: '#app'

То есть корневым элементом приложения будет элемент с id равным app.

Также объект определяет используемые данные через параметр data:

data: {
	message: 'Hello Vue!'
}

В данном случае определено только свойство message, которая хранит строку.

В элементе с id=app на веб-странице, используя двойные фигурные скобки мы можем вывести значение свойства message и более того связать участок веб-станицы с этим элементом.

<p>{{message}}</p>

Последний параметр объекта Vue — methods определяет действия, которые выполняются в приложении:

methods: {
	setMessage: function(event){
		this.message = event.target.value;
	}
}

Здесь определен метод setMessage, который является обработчиком события ввода для элемента input на странице. Через параметр event в этот
метод передается информация о событии. В частности, используя значение event.target.value, мы можем получить введенное пользователем значение
и присвоить его переменной message. Для получения переменной message, которая была определена выше в параметра data, применяется ключевое слово this.

А для связи элемента input с этим методом определяется атрибут v-on:input="setMessage".

Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):

И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.

Краткое руководство. Создание первого приложения Vue.js — Visual Studio

• 
  10/31/2019
• Чтение занимает 4 мин

В этой статье

В рамках этого краткого (на 5–10 минут) знакомства с возможностями интегрированной среды разработки (IDE) Visual Studio вы создадите и запустите простое веб-приложение Vue.js.In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you’ll create and run a simple Vue.js web application.

Важно!

Для выполнения инструкций из этой статьи вам потребуется шаблон Vue.js, который доступен, начиная с версии Visual Studio 2017 15.8.This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15. 8.

Предварительные требованияPrerequisites

• У вас должна быть установлена среда Visual Studio и должна иметься рабочая нагрузка «Разработка Node.js».You must have Visual Studio installed and the Node.js development workload.

  Если вам нужно установить рабочую нагрузку, но вы уже используете Visual Studio, выберите пункт Средства > Получить средства и компоненты… , после чего запустится Visual Studio Installer.If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features…, which opens the Visual Studio Installer. Выберите рабочую нагрузку Разработка Node.js, а затем элемент Изменить.Choose the Node.js development workload, then choose Modify.

• У вас должна быть установлена среда выполнения Node.js.You must have the Node.js runtime installed.

  Если он не установлен, мы рекомендуем установить версию LTS с веб-сайта Node. js для обеспечения лучшей совместимости с внешними платформами и библиотеками.If you don’t have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js построен для 32-разрядных и 64-разрядных архитектур.Node.js is built for 32-bit and 64-bit architectures. Средства Node.js в Visual Studio, включенные в рабочую нагрузку Node.js, поддерживают обе версии.The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. Однако требуется только одна, поскольку программа установки Node.js поддерживает только одну установку за раз.Only one is required and the Node.js installer only supports one being installed at a time.

  Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js.In general, Visual Studio automatically detects the installed Node.js runtime. Если установленная среда выполнения не обнаружена, вы можете настроить проект так, чтобы он ссылался на установленную среду выполнения, на странице свойств (после создания проекта щелкните его узел правой кнопкой мыши, выберите пункт Свойства и укажите путь Node. exe).If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). Можно использовать глобальную установку Node.js или указать путь к локальному интерпретатору в каждом из проектов Node.js.You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

Создание проектаCreate a project

Сначала вы создадите проект веб-приложения Vue.js.First, you’ll create a Vue.js web application project.

1. Если у вас не установлена среда выполнения Node.js, установите версию LTS с веб-сайта Node.js.If you don’t have the Node.js runtime already installed, install the LTS version from the Node.js website.

   Дополнительные сведения см. в необходимых условиях.For more information, see the prerequisites.

2. Запустите Visual Studio.Open Visual Studio.

3. Создайте новый проект.Create a new project.

   Нажмите клавишу ESC, чтобы закрыть окно запуска.Press Esc to close the start window. Нажмите CTRL + Q, чтобы открыть поле поиска, введите Basic Vue.js и выберите Простое веб-приложение Vue.js (JavaScript или TypeScript).Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript). В появившемся диалоговом окне введите имя basic-vuejs, а затем выберите команду Создать.In the dialog box that appears, type the name basic-vuejs, and then choose Create.

   В верхней строке меню последовательно выберите Файл  > Создать  > Проект. From the top menu bar, choose File > New > Project. В левой области диалогового окна Новый проект разверните узел JavaScript или TypeScript и выберите Node.js.In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. В средней области выберите Простое веб-приложение Vue.js, введите basic-vuejs и нажмите кнопку ОК.In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.

   Если шаблон проекта Простое веб-приложение Vue.js отсутствует, нужно добавить рабочую нагрузку Разработка Node.js.If you don’t see the Basic Vue.js Web application project template, you must add the Node. js development workload. Подробные инструкции см. в разделе с предварительными требованиями.For detailed instructions, see the Prerequisites.

   Visual Studio создаст новый проект.Visual Studio creates the new project. Новый проект откроется в обозревателе решений (в правой области).The new project opens in Solution Explorer (right pane).

4. Отслеживайте установку пакетов npm, необходимых для приложения, в окне вывода (нижняя панель).Check the Output window (lower pane) for progress on installing the npm packages required for the application.

5. В обозревателе решений откройте узел npm и проверьте установку всех необходимых пакетов npm.In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

   Если каких-либо пакетов не хватает (имеется значок с восклицательным знаком), можно щелкнуть правой кнопкой мыши узел npm и выбрать пункт Установить недостающие пакеты npm. If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages.

Изучение интегрированной среды разработкиExplore the IDE

1. Посмотрите на обозреватель решений в правой области.Take a look at Solution Explorer in the right pane.

   • Полужирным шрифтом выделен ваш проект, имя которого вы указали в окне Новый проект.Highlighted in bold is your project, using the name you gave in the New Project dialog box. На диске этот проект представлен файлом NJSPROJ в папке проекта.On disk, this project is represented by a .njsproj file in your project folder.

   • На верхнем уровне находится решение, имя которого по умолчанию совпадает с именем проекта.At the top level is a solution, which by default has the same name as your project. Решение, представленное на диске файлом SLN, является контейнером для одного или нескольких связанных проектов. A solution, represented by a .sln file on disk, is a container for one or more related projects.

   • В узле npm представлены все установленные пакеты npm.The npm node shows any installed npm packages. Вы можете щелкнуть узел npm правой кнопкой мыши, чтобы найти и установить пакеты npm с помощью диалогового окна.You can right-click the npm node to search for and install npm packages using a dialog box.

2. Чтобы установить пакеты npm или выполнить команды Node.js из командной строки, щелкните узел проекта правой кнопкой мыши и выберите пункт Открыть командную строку здесь.If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

Добавление VUE-файла в проектAdd a .vue file to the project

1. В обозревателе решений щелкните правой кнопкой мыши любую папку, например src/components, а затем выберите Добавить > Новый элемент. In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

2. Выберите Отдельный VUE-файл JavaScript или Отдельный VUE-файл TypeScript и нажмите кнопку Добавить.Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add.

   Среда Visual Studio добавит новый файл в проект.Visual Studio adds the new file to the project.

Построение проектаBuild the project

1. Затем выберите Сборка>Собрать решение для сборки проекта.Next, choose Build > Build Solution to build the project.

2. Просмотрите результаты сборки в окне вывода и выберите Сборка в списке Показать выходные данные из. Check the Output window to see build results, and choose Build from the Show output from list.

1. В Visual Studio выберите Сборка>Очистить решение (только для проектов TypeScript).(TypeScript project only) From Visual Studio, choose Build > Clean Solution.

2. Затем выберите Сборка>Собрать решение для сборки проекта.Next, choose Build > Build Solution to build the project.

3. Просмотрите результаты сборки в окне вывода и выберите Сборка в списке Показать выходные данные из.Check the Output window to see build results, and choose Build from the Show output from list.

В шаблоне проекта JavaScript Vue.js (и более ранних версиях шаблона TypeScript) используйте скрипт build npm, настроив событие после сборки. The JavaScript Vue.js project template (and older versions of the TypeScript template) use the build npm script by configuring a post build event. Если вы хотите изменить этот параметр, откройте файл проекта ( <projectname>.njsproj) в проводнике Windows и найдите следующую строку кода:If you want to modify this setting, open the project file (<projectname>.njsproj) from Windows Explorer and locate this line of code:

<PostBuildEvent>npm run build</PostBuildEvent>

Запуск приложенияRun the application

1. Чтобы запустить приложение, нажмите клавиши CTRL+F5 (или последовательно выберите Отладка > Запуск без отладки).Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application.

   В консоли появится сообщение Запуск Development Server.In the console, you see a message Starting Development Server.

   Затем приложение откроется в браузере.Then, the app opens in a browser.

   Если сведения о работающем приложении не отображаются, обновите страницу.If you don’t see the running app, refresh the page.

2. Закройте веб-браузер.Close the web browser.

Поздравляем с завершением этого краткого руководства!Congratulations on completing this Quickstart! Надеемся, что вы узнали нечто новое об использовании интегрированной среды разработки Visual Studio с Vue.js.We hope you learned a little bit about using the Visual Studio IDE with Vue.js. Если вы хотите ознакомиться с возможностями этого продукта более подробно, продолжите работу с руководством из раздела Руководства в содержании.If you’d like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Следующие шагиNext steps

Как начать использовать Vue.js? — Установка первого приложения

Самый быстрый и самый правильный способ установки vue. js через Vue CLI.

Что такое Vue CLI:

Для того чтобы полноценно использовать vue.js в своих проектах, как правило одного vue.js не достаточно, вам скорее всего потребуются доп. плагины к vue, такие как vuex.js , плагины для поддержки устаревших браузеров и прочие зависимости.

Чтобы не заморачиваться и не тратить на это много времени, есть возможность начать работать с vue написав одну строчку в консоле, в этом нам и поможет Vue CLI. Чтобы развернуть стартовый набор, достаточно написать одну строчку:

vue create project-name

Но перед тем как мы ее напишем, нужно установить сам Vue CLI.

Для того чтобы установить:

Потребуется установить Node.js версии 8.9 или выше (рекомендуется 8.11.0+).

После того как вы установите node.js (Это нужно сделать 1 раз! Как и установка Vue CLI).

npm install -g @vue/cli

Создание первого проекта

1. Установка node.js
2. Установка Vue CLI Открываем консоль и запускаем инсталлятор

   
   	npm install -g @vue/cli
   	

3. Создание проекта на vue.js В консоле переходим в ту директорию, в которой вы хотите развернуть проект и запускаем команду:

   
   	vue create project-name
   	

   После ввода команды, будет задан вопрос:

   Стрелками на клавиатуре выбираем нужный вариант, а нужный для начало это default, нажимаем enter и начнется развертывание проекта.

Структура Vue.js

• node_module — Это папка служит для сбора всех зависимостей, плагинов для работы с vue.js
• public — Папка с чистым html, где указан тэг div с идентификатором app, которая служит ссылкой для vue. js
• src — Папка с Vue содержимым

Более подробное описание установки, вы можете найти по ссылке cli.vuejs.org

Если перейти в файл src/main.js, то мы увидим:

import Vue from 'vue' // Добавляем vue.js
import App from './App.vue' // Стартовый файл, приложения на vue

Vue.config.productionTip = false

/* Тут мы указываем тот самый идентификатор #app, который был в файле public/index.html и условно говорим, что все что у нас скомпилируется в app.vue мы должны вставить вместо тега с идентификатором #app */
new Vue({
  render: h => h(App)
}).$mount('#app')

Вот пожалуй и все, в следующих записях буду уже рассказывать как работать с vue.js

Как использовать методы во vue.js

vue — npm

Поддержка Vue.

js

Vue.js — это проект с открытым исходным кодом под лицензией MIT, постоянное развитие которого стало возможным полностью благодаря поддержке этих замечательных спонсоров. Если вы хотите присоединиться к ним, обратите внимание:

В чем разница между Patreon и OpenCollective?

Средства, пожертвованные через Patreon, идут напрямую на поддержку постоянной работы Эвана Ю над Vue.js. Средства, пожертвованные через OpenCollective, управляются с прозрачными расходами и будут использоваться для компенсации работы и расходов основных членов команды или спонсирования общественных мероприятий.Ваше имя / логотип получит должное признание и распространение, сделав пожертвование на любой платформе.

Специальные спонсоры

Платиновые спонсоры

Платиновые спонсоры (Китай)

Золотые спонсоры

Спонсоры через Открытый коллектив

Платина

Золото

Введение

Vue (произносится как « / vjuː / », как «представление») — это прогрессивная структура для создания пользовательских интерфейсов. Он разработан с нуля для постепенного внедрения и может легко масштабироваться между библиотекой и фреймворком в зависимости от различных вариантов использования. Он состоит из доступной базовой библиотеки, которая фокусируется только на уровне представления, и экосистемы вспомогательных библиотек, которая помогает решать сложные задачи в больших одностраничных приложениях.

Совместимость с браузером

Vue.js поддерживает все браузеры, совместимые с ES5 (IE8 и ниже не поддерживаются).

Экосистема

Документация

Чтобы ознакомиться с живыми примерами и документацией, посетите vuejs.орг.

Вопросы

Для вопросов и поддержки используйте официальный форум или чат сообщества. Список проблем этого репо — исключительно для отчетов об ошибках и запросов функций.

Выпуски

Перед открытием проблемы обязательно прочтите Контрольный список для сообщения о проблемах. Вопросы, не соответствующие правилам, могут быть немедленно закрыты.

История изменений

Подробные изменения для каждого выпуска задокументированы в примечаниях к выпуску.

Оставайся на связи

Вклад

Пожалуйста, не забудьте прочитать Руководство по участию, прежде чем делать пул реквест. Если у вас есть проект / компонент / инструмент, связанный с Vue, добавьте его с запросом на перенос в этот тщательно подобранный список!

Спасибо всем, кто уже внес свой вклад в Vue!

Лицензия

MIT

Copyright (c) 2013-настоящее время, Юси (Эван) Ю

Установка | Vue.js

Vue.js создан специально для постепенного внедрения.Это означает, что его можно интегрировать в проект несколькими способами в зависимости от требований.

Существует три основных способа добавления Vue.js в проект:

1. Импортируйте его как пакет CDN на странице
2. Установите его с помощью npm
3. Используйте официальный интерфейс командной строки для разработки проекта, который предоставляет включенные батареи настройки сборки для современного рабочего процесса внешнего интерфейса (например, горячая перезагрузка, lint-on-save и многое другое)

Примечания к выпуску

Последняя версия:

Подробные примечания к выпуску для каждой версии доступны на GitHub (открывается в новом окне ).

В настоящее время в бета-версии — интеграция Vuex и маршрутизатора все еще WIP

При использовании Vue мы рекомендуем также установить Vue Devtools (открывается в новом окне) в вашем браузере, что позволит вам проверять и отлаживать свои приложения Vue в большем количестве пользователей. -дружественный интерфейс.

Получить расширение Chrome (открывается в новом окне)

Получить расширение для Firefox (открывается в новом окне)

Получить автономное приложение Electron (открывается в новом окне)

CDN

Для создания прототипов или обучения вы можете использовать последнюю версию версия с:

1

Для производства мы рекомендуем ссылаться на конкретный номер версии и сборку, чтобы избежать неожиданной поломки из более новых версий.

npm

npm — рекомендуемый метод установки при создании крупномасштабных приложений с помощью Vue. Он прекрасно сочетается с такими сборщиками модулей, как Webpack (открывается в новом окне) или Rollup (открывается в новом окне). Vue также предоставляет сопутствующие инструменты для создания однофайловых компонентов.

 
$ npm установить vue @ next
  

1
2

CLI

Vue предоставляет официальный интерфейс командной строки (открывается в новом окне) для быстрого создания амбициозных одностраничных приложений. Он предоставляет настройки сборки с батарейками для современного рабочего процесса. Подготовка к работе со сборками с горячей перезагрузкой, сохранением с сохранением и готовыми к работе сборками занимает всего несколько минут. Дополнительные сведения см. В документации Vue CLI (открывается в новом окне).

СОВЕТ

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

Для Vue 3 вы должны использовать Vue CLI v4.5, доступный на npm как @ vue / cli . Для обновления вам необходимо переустановить последнюю версию @ vue / cli глобально:

  yarn global add @ vue / cli

npm install -g @ vue / cli
  

1
2
3

Затем в проектах Vue запустите

Vite

Vite (открывается в новом окне) — это инструмент сборки веб-разработки, который позволяет молниеносно обслуживать код благодаря встроенному подходу импорта модуля ES .

Проекты Vue можно быстро настроить с помощью Vite, выполнив следующие команды в вашем терминале.

С npm:

  $ npm init @ vitejs / app <имя-проекта>
$ cd <имя-проекта>
$ npm install
$ npm запустить dev
  

1
2
3
4

Или с пряжей:

  $ yarn create @ vitejs / app <имя-проекта>
$ cd <имя-проекта>
$ пряжа
$ yarn dev
  

1
2
3
4

Объяснение различных сборок

В каталоге dist / пакета npm (открывается в новом окне) вы найдете множество различных сборок Vue. js. Вот обзор того, какой файл dist следует использовать в зависимости от варианта использования.

Из CDN или без Bundler

vue (.runtime) .global (.prod) .js :

• Для прямого использования через

  Иногда вам нужно настроить поведение плагина. Вы можете легко сделать это, передав ему некоторые параметры при вызове Vue.use () . Вот как это работает:

    Vue.use (YourPlugin, {
   someOption: false,
   другой вариант: ложь
  })
    

  Например, с vue-chartist вы можете выбрать текст, который будет отображаться при отсутствии данных, чтобы правильно нарисовать диаграмму, как показано ниже:

    Vue.используйте (VueChartist, {
   messageNoData: «У вас недостаточно данных»
  });
    

  А теперь вернемся к главному событию - совместному созданию вашего первого плагина Vue.js. 💪

  Как создать свой собственный плагин Vue.js с нуля

  Если вы читаете это, вы, вероятно, такой же интерфейсный разработчик, как я. И, как и любой другой фронтенд-разработчик, вам, вероятно, нравится иметь красивые красивые кнопки для ваших интерфейсов! Вот что мы будем создавать: набор красивых красивых кнопок, которые мы сможем использовать повторно. Это сэкономит нам много времени для будущих проектов! Вы также будете знать, как упаковать все остальные базовые компоненты, и почему бы не выпустить собственную дизайн-систему?

  Шаг 1. Инициализация структуры подключаемого модуля

  Давайте создадим пустую папку для нашего пакета и инициализируем NPM. Будет создан новый файл package.json . Мы разберемся с этим позже.

    $ mkdir красивая-красивая-кнопка && cd красивая-красивая-кнопка
  $ npm init
  
  
    

  Добавьте новую папку с именем src в корень, в которой вы создадите новый файл NiceHandsomeButton.vue . Вы можете быстро создать прототип с помощью всего одного файла * .vue с командами vue serve и vue build , но для них сначала необходимо установить дополнительный глобальный аддон:

    npm install -g @ vue / cli
  npm install -g @ vue / cli-service-global
    

  Теперь, если вы запустите:

    $ vue serve src / NiceHandsomeButton. vue
    

  Посетите http: // localhost: 8080/. В вашем браузере должна появиться пустая страница.Теперь поработаем над нашей кнопкой! 👩‍💻👨‍💻

  Подробнее о @ vue / cli-service-global можно прочитать в официальной документации. Этот аддон заключается в том, что он весьма полезен для работы с одним файлом .vue без создания строительных лесов для всего проекта с помощью vue create my-new-project .

  Шаг 2: Работа над нашим красивым компонентом кнопки

  Шаблон

  Поскольку это руководство не посвящено изучению того, как писать компоненты Vue, я ожидаю, что вы знакомы с основами.Полный код нашей красивой красивой кнопки доступен ниже (шаблон, логика JavaScript и стиль). Скопируйте его, откройте NiceHandsomeButton.vue и вставьте содержимое внутрь.

    <шаблон>
   кнопка <
    @ click = "onClick"
    @ dblclick = "onDoubleClick"
    : class = "[
     "красивая-красивая-кнопка",
     'симпатичная-красивая-пуговица--' + цвет,
     'красивая-красивая-пуговица--' + размер,
     {
      'красивая-красивая-кнопка - закругленная': закругленная
     }
    ] "
   >
     
   
  
    

  Мы постарались упростить задачу, но вот несколько моментов, на которые следует обратить внимание:

  • Использую БЭМ. Если вы не знакомы с ним, прочтите, пожалуйста, это сейчас: MindBEMding - разобраться в синтаксисе БЭМ.
  • Я добавил реквизиты цвета , размера и закругленные . Как следует из их названий, они позволят нам управлять цветом, размером и тем, должна ли наша кнопка быть округленной.
  • Я также использую слот для контента, чтобы мы могли использовать его как обычную кнопку My Button Label .

  JavaScript

  Давайте определим свойства, которые может принимать наш компонент, а также два метода, которые будут генерировать событие, когда мы щелкаем / дважды щелкаем по нему.

    <сценарий>
  экспорт по умолчанию {
   props: {
    цвет: {
     тип: String,
     по умолчанию: "синий",
     validator (x) {
       return ["синий", "зеленый", "красный"]. indexOf (x)! == -1;
     }
    },
    округлено: {
     тип: логический,
     по умолчанию: true
    },
    размер: {
     тип: String,
     по умолчанию: "по умолчанию",
     validator (x) {
      return ["маленький", "по умолчанию", "большой"]. indexOf (x)! == -1;
     }
    },
   },
  
   методы: {
    onClick (event) {
     this. $ emit ("щелчок", событие);
    },
  
    onDoubleClick (event) {
     this. $ emit ("dblclick", событие);
    },
   }
  };
  
    

  Стиль

  И последнее, но не менее важное: давайте стилизуем наш компонент. 👩‍🎨

    <стиль>
  .nice-beautiful-button {
   дисплей: встроенный блок;
   контур: 0;
   граница: 1px solid rgba (0, 0, 0, 0,1);
   цвет: #ffffff;
   font-weight: 500;
   семейство шрифтов: «Helvetica Neue», Helvetica, Arial, без засечек;
   выбор пользователя: нет;
   курсор: указатель;
  }
  
  
  
  .красивая-красивая-пуговица - синяя {
   цвет фона: # 0194ef;
  }
  
  .nice-beautiful-button - green {
   цвет фона: # 1bb934;
  }
  
  .nice-beautiful-button - красный {
   цвет фона: # e1112c;
  }
  
  
  
  .nice-beautiful-button - small {
   отступ: 8 пикселей 10 пикселей;
   радиус границы: 4 пикселя;
   размер шрифта: 12 пикселей;
   высота строки: 12 пикселей;
  }
  
  .nice-beautiful-button - default {
   отступ: 12 пикселей 14 пикселей;
   радиус границы: 6 пикселей;
   размер шрифта: 14 пикселей;
   высота строки: 16 пикселей;
  }
  
  . nice-beautiful-button - large {
   отступ: 16 пикселей 18 пикселей;
   радиус границы: 8 пикселей;
   размер шрифта: 16 пикселей;
   высота строки: 20 пикселей;
  }
  
  
  
  .nice-beautiful-button - закругленная {
   радиус границы: 60 пикселей;
  }
  
    

  Теперь наш компонент готов к использованию и может использоваться следующим образом:

     Моя кнопка 
    

  Давайте упакуем сейчас. 💪

  Шаг 3. Напишите метод установки

  Прежде чем мы начнем этот раздел, давайте создадим файл index.js в вашей папке src.

  Помните, что Vue.use () global, о которых мы говорили ранее? Что ж ... эта функция вызывает метод install () , который мы сейчас определим.

  Эта функция принимает два параметра: конструктор Vue и объект options , который может установить пользователь. Вы можете пропустить последний аргумент, если он вам не нужен, так как это (необязательно) . Но если вы хотите сделать свой плагин настраиваемым, помните, что здесь вы увидите различные параметры:

    Vue.использовать({
   param: "что-то"
  }) `;
  
  
    

  Вернемся к нашему подключению. Теперь в index.js давайте импортируем наш компонент и определим наш метод install .

    импортировать NiceHandsomeButton из "./NiceHandsomeButton.vue";
  
  экспорт по умолчанию {
   install (Vue, options) {
    
    
    Vue.component («красивая-красивая-кнопка», NiceHandsomeButton);
   }
  };
    

  Поздравляю, у вас почти получилось! 👏

  Шаг 4. Переделка

  package.json

  Откройте свой пакет .json , который вы создали при запуске npm init .

    {
   "частный": ложь,
   "name": "симпатичная-красивая-кнопка",
   "версия": "0.0.1",
   "description": " Симпатичная красивая кнопка, которая поможет вам изучить мастерство создания плагинов для бассейна 🎨", 

    "автор": "Нада Рифки",
   «лицензия»: «MIT»,
   "main": ". /dist/index.js",
   "scripts": {
    "dev": "vue serve NiceHandsomeButton.vue",
    "build": "bili --name index --plugin vue --vue.css false"
   },
   "файлы": [
    "расст / *"
   ]
  }
    

  Несколько примечаний:

  • частный установлен на ложный .Это означает, что ваш пакет является общедоступным (т.е. каждый может его увидеть и установить).
  • Выберите имя для вашего пакета. Вы должны убедиться, что это еще не номер .
  • Номер версии установлен на 0.0.1 . Вам придется увеличивать это число каждый раз, когда вы публикуете обновление для своего пакета. Если вы не знакомы с семантическим управлением версиями, я настоятельно рекомендую вам прочитать это.
  • Выберите описание, которое коротко описывает ваш пакет.Это поможет другим разработчикам понять, какую боль решает ваш плагин.
  • Основной - это основная точка входа в вашу программу. То есть, если ваш пакет называется foo , и пользователь устанавливает его, а затем требует ("foo") , то будет возвращен объект экспорта вашего основного модуля.
  • Свойство scripts - это словарь, содержащий команды сценария, которые можно легко запустить с помощью npm run .
  • Свойство files указывает, какие файлы следует публиковать в NPM. Публиковать все - обычно плохая идея. Мы будем использовать bili , поэтому все файлы в папке dist должны быть включены.

  Подробнее обо всех этих свойствах можно прочитать в официальной документации NPM.

  Объединение вашей библиотеки

  Если вы не знаете, объединение - это процесс группирования всего вашего кода из всех файлов в вашем проекте в один файл.Причина этого - просто в увеличении производительности. Это также уменьшит размер кода и выполнит некоторые другие интересные вещи.

  Для этого мы воспользуемся Bili, быстрым сборщиком библиотек с нулевой конфигурацией, который использует Rollup.js под капотом.

  Сначала убедитесь, что у вас установлена ​​последняя версия Node.js (для Bili требуется Node.js 8 или выше):

  # Проверьте версию Node.js

    
   $ узел -v 
    

  Если используемая вами версия Node устарела, перейдите к узлу.js.org, чтобы обновить его.

  Теперь давайте установим Bili.

    $ npm install --save-dev bili
  
  
  
  $ npm install --save-dev rollup-plugin-vue
  $ npm install --save-dev vue-template-compiler
    

  Теперь создайте наш файл bili.config.js в корневой папке и добавьте наши настройки связывания:

    module.exports = {
    баннер: правда,
    вывод: {
      extractCSS: ложь,
    },
    плагины: {
      vue: {
        css: правда
      }
    }
  };
    

  Все, что вам осталось сделать, это запустить приведенную ниже команду на вашем терминале, и ваш пакет будет объединен - ​​это так же просто, как 1-2-3!

    $ npx bili --bundle-node-modules
    

  Вы должны получить новую папку dist с индексом . cjs.js файл.

  По умолчанию тег