Как открыть vue в браузере
Как и в случае с другими фреймворками, для всего множества полезных вещей, которые они могут использовать, мы должны сначала установить их или найти ссылку на их расположение в Интернете, эта статья проведет вас через процесс установки Vue.JS.
Примечание о совместимости
Из-за того, что Vue использует функции ES5 (ECMAScript 5), которые плохо работают с IE8 и ниже, Vue не поддерживает IE8. Тем не менее, вы можете запустить Vue в любом браузере, к которому относится жалоба ES5.
На момент написания этой статьи стабильной версией Vue является версия 2.6.10.
Vue Devtools
При программировании на JavaScript вы быстро столкнетесь с проблемами, если не сделаете консоль своим другом для отладки, также при работе с Vue рекомендуется установить Vue Devtools. Это позволяет нам эффективно отслеживать и отлаживать наши приложения. Гораздо больше, чем обычная консольная отладка.
Vue предоставляет три способа установки, а именно:
- прямое <script> включение
- НПМ
- Vue Cli
прямое <script> включение
Чтобы установить Vue с помощью этого метода, все, что вам нужно сделать, это предоставить тег сценария с атрибутом src, указывающий на местоположение Vue.
Существует в основном две формы этого сценария, которые являются сценариями, готовыми к разработке и производству.
При обучении вы можете использовать последнюю версию или версию для разработки, например, так:
Однако, когда вы создаете производственное приложение, укажите ссылку на конкретный номер версии, например, так:
Или вы можете использовать синтаксис ES-модулей в том случае, если вы используете нативные ES-модули, как показано ниже:
Vue одинаково доступен на unpkg и cdnjs.
NPM
При создании больших приложений с помощью Vue всегда рекомендуется использовать NPM, потому что он хорошо работает с Webpack и Browserify, которые являются очень эффективными компоновщиками модулей. Чтобы получить Vue с помощью NPM, просто запустите следующую строку в командной строке:
CLI
Чтобы начать работу с одностраничным приложением, вы можете использовать официальный CLI Vue. Это обеспечит вам создание настроек, подходящих для современного рабочего процесса внешнего интерфейса.
Чтобы использовать Vue CLI, выполните эти инструкции в командной строке.
Объяснение различных сборок
Runtime + Compiler vs Runtime-only
Мы используем компилятор, когда нам нужно скомпилировать шаблоны на клиенте. Например, вам понадобится компилятор, если вы хотите смонтировать элемент, используя элементы в DOM HTML в качестве шаблона.
Всякий раз, когда мы используем vue-loader или vuetify, файлы * .vue содержат шаблоны, которые будут предварительно скомпилированы как JavaScript во время сборки.
Таким образом, поскольку только время выполнения более легкое по сравнению с полной сборкой, рекомендуется использовать его при любой возможности.
Однако, если вы предпочитаете полную сборку, тогда вы должны настроить псевдоним для упаковщика:
Развитие против режима производства
Обычно не минимизированная форма vue предназначена для разработки, тогда как минимизированная форма предназначена для производственного приложения. Модули CommonJS и ES, однако, не входят в минимизированные версии, их нужно минимизировать самостоятельно.
сборки commons и ES Module помогают нам сохранить необработанные проверки для process.env.NODE_ENV, чтобы определить соответствующий режим, в котором они должны работать. Всегда используйте соответствующую конфигурацию пакета для замены переменных среды, чтобы управлять режимом, в котором должен работать Vue.
Когда мы заменим process.env.NODE_ENV на строковые литералы, минификаторы, такие как UglifyJS, будут полностью отбрасывать блоки кода, предназначенные только для разработки.
Webpack
С webpack 4+ можно использовать опцию режима:
Принимая во внимание, что в более низкой версии нам нужно будет использовать DefinePlugin
Свернуть
Это достигается с помощью rollup-plugin-replace
Browserify
Просто примените envify transform к вашему пакету
Среда CSP
Существуют такие среды, как Google Chrome, которые применяют Политику безопасности контента (CSP), это предотвращает использование новой функции () в качестве оценщика выражений. Поскольку полная сборка зависит от новой функции, ее нельзя использовать в таких средах. Однако только сборки времени выполнения совместимы с CSP.
Dev Build
Вы можете использовать Vue из его последнего исходного кода на GitHub:
Беседка
Vue также можно установить с помощью Bower, используя команду bower install, как показано ниже
Vue.js — это Open Source веб-фреймворк для создания пользовательских интерфейсов на JavaScript. С его помощью можно создавать динамические сайты и сложные одностраничные веб-приложения. Перед началом работы с Vue надо установить Node.js и менеджер пакетов npm . Для создания vue-проекта нам потребуется установить пакет vue-cli .
Создание нового проекта
Запускаем интерпретатор команд от имени администратора:
Создаем директорию для проектов Vue:
И создаем первый проект:
На первом экране будет три пункта:
Мы выбираем первый пункт — Vue 2-ой версии с двумя плагинами. Babel преобразует код на ES6 (ES-2015) в код на предыдущем стандарте ES5, чтобы его понимали старые версии браузеров. ESLint позволяет проводить анализ качества кода, написанного на любом выбранном стандарте JavaScript.
При выборе последнего пункта можно вручную настроить конфигурацию и потом сохранить для дальнейшего использования. Можно выбрать версию Vue, в какой момент и как именно проверять качество кода, где хранить конфигурацию проекта — в отдельных файлах (In dedicated config files) или в одном файле (In package.json).
В конце можно сохранить свои настройки для дальнейшего использования — например, под именем MySettings . При создании нового проекта будет уже не три пункта, а четыре — первым будет наш MySettings .
Настройки сохраняются в файле C:/Users/Evgeniy/.vuerc :
Посмотреть сохраненные настройки можно с помощью команды
Для редактирования настроек предназначена команда
Переходим в директорию проекта и запускаем сервер
Как работает приложение
Любое сложное приложение всегда можно разбить на небольшие части. Каждая такая часть — это компонент, реализующий какой-то функционал. Компонентный подход позволяет избежать мешанины кода и чётко выстраивать архитектуру приложения. Каждую из частей при выделении в компонент проще поддерживать, а при необходимости повторять разбиение внутри компонента на ещё меньшие части.
Для удобной организации компонентов и их составляющих используются vue-файлы, которые состоят из трех частей:
- <template> — шаблон компонента
- <script> — логика компонента
- <style> — стили компонента
В нашем приложении есть главный компонент App.vue , с которого все начинается. И этот компонент подключает остальные, которые расположены в директории components — например, компонент HelloWorld.vue .
Теперь создадим компонент HelloWorld.vue в директории components :
События жизненного цикла
Vue даёт возможность создавать обработчики для событий жизненного цикла компонентов. Это означает, что можно прослушивать события вроде created , mounted и destroyed . При возникновении события можно организовать выполнение некоего кода.
Vue имеет отличную панель, которая интегрируется с инструментами разработчика браузера, что позволяет вам проверять ваше приложение и взаимодействовать с ним, чтобы упростить отладку и понимание.
Это дружеское напоминание об установкеРасширение Vue Devtools. Что это? Любой популярный фреймворк имеет собственное расширение devtools, которое обычно добавляет новую панель к инструментам разработчика браузера, которая намного более специализирована, чем те, которые браузер поставляет по умолчанию. В этом случае панель позволит нам проверить наше приложение Vue и взаимодействовать с ним.
Этот инструмент будет отличным подспорьем при создании приложений Vue. Инструменты разработчика могут проверять приложение Vue, только когда оно находится в режиме разработки. Это гарантирует, что никто не сможет использовать их для взаимодействия с вашим производственным приложением (и сделает Vue более производительным, потому что ему не нужно заботиться об инструментах разработчика).
Есть 3 способа установить Vue Dev Tools:
- в Chrome
- в Firefox
- как отдельное приложение
Safari, Edge и другие браузеры не поддерживаются настраиваемым расширением, но с помощью автономного приложения вы можете отлаживать приложение Vue.js, работающее в любом браузере.
Установить в Chrome
Пройдите процесс установки:
Значок Vue.js devtools отображается на панели инструментов. Если на странице не запущен экземпляр Vue.js, он неактивен.
Если обнаружен Vue.js, значок имеет цвета логотипа Vue.
Значок ничего не делает, кроме как показывает нам, что естьявляетсяэкземпляр Vue.js. Чтобы использовать инструменты разработчика, мы должны открыть панель инструментов разработчика, выбрав «Вид → Разработчик → Инструменты разработчика», или Cmd-Alt-i
Установить в Firefox
Нажмите «Добавить в Firefox»И расширение будет установлено. Как и в случае с Chrome, на панели инструментов отображается серый значок.
И когда вы посещаете сайт, на котором запущен экземпляр Vue, он станет зеленым, а когда мы откроем инструменты разработчика, мы увидим значок «VueПанель:
Установите автономное приложение
В качестве альтернативы вы можете использовать автономное приложение DevTools.
Установите его, используя
и запустите его, позвонив
Это откроет автономное приложение на основе Electron.
теперь вставьте тег скрипта, который он вам показывает:
внутри проекта index.html файл и дождитесь перезагрузки приложения, и оно автоматически подключится к приложению:
Как использовать инструменты разработчика
Как уже упоминалось, Vue DevTools можно активировать, открыв Инструменты разработчика в браузере и перейдя на панель Vue.
Другой вариант - щелкнуть правой кнопкой мыши любой элемент на странице и выбрать «Проверить компонент Vue»:
Когда панель Vue DevTools открыта, мы можем перемещаться по дереву компонентов. Когда мы выбираем компонент из списка слева, на правой панели отображаются свойства и данные, которые он содержит:
Сверху 4 кнопки:
- Составные части(текущая панель), в которой перечислены все экземпляры компонентов, запущенные на текущей странице. Vue может иметь несколько экземпляров, работающих одновременно, например, он может управлять вашим виджетом корзины покупок и слайд-шоу с помощью отдельных легких приложений.
- Vuexздесь вы можете проверить состояние, управляемое черезVuex.
- Событияпоказывает все сгенерированные события
- Обновитьперезагружает панель инструментов разработчика
Обратите внимание на маленький = $vm0 текст рядом с компонентом? Это удобный способ проверить компонент с помощью консоли. При нажатии клавиши «esc» в нижней части инструментов разработчика отображается консоль, и вы можете ввести $vm0 для доступа к компоненту Vue:
Очень здорово проверять компоненты и взаимодействовать с ними, не назначая их глобальной переменной в коде.
Компоненты фильтра
Начните вводить имя компонента, и дерево компонентов отфильтрует те, которые не совпадают.
Выбрать компонент на странице
кнопку, и вы можете навести курсор мыши на любой компонент на странице, щелкнуть по нему, и он откроется в инструментах разработчика.
Названия компонентов формата
Вы можете отображать компоненты в camelCase или использовать тире.
Фильтровать проверенные данные
На правой панели вы можете ввести любое слово, чтобы отфильтровать свойства, которые ему не соответствуют.
Проверить DOM
Открыть в редакторе
Любой пользовательский компонент (не компоненты уровня фреймворка) имеет кнопку, открывающую его в редакторе по умолчанию. Очень удобно.
В этой статье мы познакомимся с Vue.js. По сравнению с другими популярными фреймворками, Vue.js намного проще и удобнее использовать, поэтому, если вы новичок, то начать с него вам будет проще.
Мы собираемся создать наш интерфейс как SPA (одностраничное приложение). Это тип веб-приложения, которое никогда не перезагружается, потому что оно переписывает содержимое одного файла HTML, что обеспечивает более плавный пользовательский интерфейс и ощущение, что оно похоже на настольное приложение.
Установка Vue CLI и запуск нового проекта
Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:
После установки мы собираемся создать новый проект, используя официальный шаблон Vue.js Webpack. Webpack - это сборщик модулей, который будет генерировать статические ресурсы из наших модулей и зависимостей.
Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:
Через некоторое время мастер установки задаст нам несколько вопросов.
Подробности проекта
Первый вопрос: Project name (имя проекта). Назовем его, account-owner-client , вы можете назвать его как захотите, главное чтобы имя пакета узла не содержало заглавных букв, и лучше всего вводить имя в Kebab Case.
Второй вопрос: Project description (Описание проекта). А для этого мы напишем Account Owner Client Если хотите, можете написать что то свое.
Третий вопрос: Author (Автор). Сюда нужно ввести свое имя и адрес электронной почты в указанном формате Имя <[email protected]> .
Настройка Vue.js и ESLint
Четвертый вопрос: необходимо выбрать сборку Vue: Runtime + Compiler или просто Runtime . Мы выберем, Runtime + Compiler потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.
Пятый вопрос: нужен ли нам vue-router , чтобы создать несколько страниц для навигации. Мы ответим утвердительно, напечатав Y .
Шестой вопрос - хотим ли включить ESLint в наш проект. ESLint - отличный пакет, который заботится о нашем стиле кода и заставляет нас писать код по строгим правилам, таким как отступ в коде, запись пробелов перед скобками в определениях функций, запись точки с запятой и многое другое. Ответим утвердительно, напечатав Y .
Седьмой вопрос: хотим ли мы использовать ESLint preset . ESLint preset - это набор правил, и существует множество предустановок, потому что у людей разные предпочтения, и, например, некоторым нравится ставить точку с запятой в конце строки, а другим нет. Мастер попросит нас выбрать между Standard preset , Airbnb preset или написать свои собственные правила. Вы можете выбрать то, что подходит вашему стилю, и изменить это позже в .eslintrc.js файле.
Настройка тестов и прочего.
Восьмой вопрос касается модульных тестов, и мы напечатаем, n потому что мы не будем рассматривать какие-либо типы тестов в данной статье.
Девятый вопрос касается тестов e2e, и мы снова напечатаем n .
Десятый и последний вопрос: нужно ли запускать мастер npm install для установки всех необходимых нам зависимостей. Мы выберем Yes, use NPM чтобы установить все необходимые зависимости.
Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:
Подождем, пока он npm все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать - использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.
Обзор структуры проекта
После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:
Пояснение к наиболее важным файлам и папкам:
- src - Исходный код нашего проекта:
- assets - Ресурсы модуля, которые будут обрабатываться с помощью Webpack
- components - здесь мы храним наши компоненты пользовательского интерфейса
- router - здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
- App.vue - это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
- main.js - файл точки входа, который будет монтироваться App.vue - наш основной компонент пользовательского интерфейса
Взглянем на файл index.html :
Единственная важная вещь в этом файле - это тег div с id app , который будет заменен нашим компонентом App.vue . В следующей строке мы можем заметить комментарий, в котором говорится: «созданные файлы будут автоматически встроены». Итак, наш js-файл, который идет в комплекте с Webpack , будет вставлен под div с id
Должно быть вы помните, что main.js это наша точка входа, верно? Давайте посмотрим на файл main.js , который является первым файлом, который запускается при запуске приложения:
Мы создаем экземпляр нового компонента Vue, который будет монтировать наш App.vue компонент внутри div с app атрибутом id - вы помните div с id app в index.html? Наконец, мы уведомляем наш компонент Vue об использовании маршрутизатора.
Структура компонента
Обратите внимание на следующий компонент:
Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.
- Шаблон - это видимое содержимое компонента
- Скрипт - это логика компонента
- Стили, как вы уже догадались, - это стили шаблона.
Шаблон
В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим <router-view/> элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.
Сценарий
В теге скрипта мы пишем логику для этого компонента. В этом компоненте у нас есть только свойство name , потому что этот компонент не является динамическим, это не что иное, как оболочка вокруг нашего представления маршрутизатора.
Стили
Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так: <style scoped> . Этот тип стиля влияет только на шаблон этого компонента и корневой элемент дочерних компонентов, поэтому стиль не может попасть в другой компонент. В противоположность этому стили без области видимости будут совместно использоваться компонентами.
Маршрутизатор
Обратим внимание на файл router/index.js :
В этом файле мы снова импортируем Vue,
Затем обратите внимание создание экземпляра маршрутизатора и списка маршрутов. Мы можем указать путь, / который означает, что когда мы открываем наше приложение и переходим к root (главной странице) ( / ), то нам будет показан компонент HelloWorld . Помните, что содержимое этого компонента будет включено в компонент App.vue внутри тега <router-view/>
Мы не собираемся анализировать файл HelloWorld.vue , потому что он почти такой же, как и файл App.vue . Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.
Запуск приложения
Теперь, когда мы разобрались с кодом, пора запустить приложение и посмотреть все на живом примере.
Введите эту команду в терминал:
Читайте также: