Использование Vue JS Webpack в разработке на примере простого проекта функции и возможности


Содержание материала:

Гид по Vue CLI для новичка

Для нового приложения Vue лучше использовать Vue CLI . Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

Vue CLI – это система для быстрой разработки и создания прототипов Vue.js. Она состоит из различных компонентов: служба CLI , плагины CLI . В последней версии утилиты в ней появился графический интерфейс для управления проектом.

Установка и системные требования Vue CLI v3

Системные требования

Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.

Ее можно установить:

  • Загрузив двоичные файлы для вашей операционной системы с официального сайта проекта.
  • Используя официальный менеджер пакетов.
  • С помощью менеджера версий.

Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:

Установка Vue CLI v3

Чтобы установить Vue CLI v3, запустите следующую команду:

Примечание: чтобы использовать командную строку от имени администратора в Windows для глобальной установки пакетов, нужно изменить разрешения. На сайте npm есть руководство о том, как это сделать .

После установки CLI вы сможете вывести список всех доступных команд, выполнив команду vue:

А также проверить установленную версию, выполнив:

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

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

  • Babel .
  • TypeScript .
  • Progressive Web App support .
  • Vue Router .
  • Vuex (библиотека для управления состоянием Vue);
  • Препроцессоры CSS ( PostCSS , CSS modules , Sass , Less , Stylus ).
  • Модуль юнит-тестов Mocha или Jest .
  • Модуль E2E-тестов Cypress или Nightwatch .

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

Затем выполните следующую команду:

Она запустит локальный сервер разработки по адресу http://localhost:8080 . Если вы перейдёте по этому адресу в своём браузере, то увидите следующую страницу:

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

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

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь .

Что такое служба Vue CLI?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

Анатомия проекта

Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.

Файлы и папки в проекте Vue:

  • public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
  • src – папка содержит исходные файлы проекта.
  • src/assets – папка содержит ресурсы проекта, такие как png.
  • src/components – папка содержит компоненты Vue.
  • src/App.vue – основной компонент Vue-проекта.
  • src/main.js – основной файл проекта, который загружает Vue-приложение.
  • config.js – файл конфигурации для Babel.
  • json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
  • node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

Плагины Vue CLI

Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.

Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.

Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.

Официальные плагины Vue CLI 3:

Как добавить плагин Vue

Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.

Полезные плагины Vue

Существует много плагинов Vue CLI, которые могут оказаться полезными для ваших проектов. Например, библиотека Vuetify UI и Storybook . Вы также можете использовать плагин Electron Builder для быстрого создания Vue-проекта на основе Electron.

Я также создал несколько расширений:

  • vue-cli-plugin-nuxt : плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js.
  • vue-cli-plugin-bootstrap : плагин Vue CLI для добавления Bootstrap 4 в проект.

А что насчёт webpack?

Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:

  • Создать файл config.js в корневом каталоге проекта, а затем выполнить настройку в параметре configureWebpack:
  • Изменить конфигурацию webpack

Больше о работе с Vue CLI и webpack .

Пользовательский интерфейс Vue CLI

Теперь рассмотрим пользовательский интерфейс Vue CLI . Третья версия утилиты предоставляет современный веб-интерфейс, который позволяет создавать проекты и управлять ими без использования командной строки. Чтобы запустить графический интерфейс, выполните следующую команду:

После этого интерфейс будет доступен по адресу http://localhost:8000 .

Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».

После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.

Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:

  • Default preset — для установки по умолчанию с плагинами Babel и ESLint.
  • Manual — для самостоятельного выбора плагинов.
  • Remote preset — для удаленной установки из репозитория Git.

Продолжим с установкой по умолчанию.

Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».

Слева от панели настройки расположены ссылки на различные разделы:

  • Plugins — для добавления новых плагинов Vue CLI.
  • Dependencies — для управления пакетами.
  • Configuration — для настройки инструментов.
  • Tasks — для запуска скриптов.

Перейдите на страницу «Tasks».

Нажмите кнопку serve , а затем кнопку « Run task », чтобы запустить проект.

Остановить проект можно с помощью кнопки « Stop task ».

Заключение

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

Данная публикация представляет собой перевод статьи « A Beginner’s Guide to Vue CLI » , подготовленной дружной командой проекта Интернет-технологии.ру

Интегрируем vue.js в проект

Создаем папку static и переходим в нее:

Далее, устанавливаем vue-cli, желательно глобально (подробнее можно почитать тут):

теперь инициализируем проект (я использую webpack-simple — шаблон инициализаци vue.js, потому что его очень удобно кастомизировать, в отличие от шаблона webpack, который заточен под nodejs разработку):

отвечаем на вопросы, например, так:

и запускаем установку пакетов:

Ждем установки всех зависимостей. Когда все установится, открываем файл package.json и смотрим содержимое. Нас интересует группа scripts, которая определяет пользовательские команды, вызываемые через:

По умолчанию нам предлагается две команды:

dev — запускает встроенный nodejs сервер для разработки с отслеживанием изменений в коде и автоматической перезагрузкой кода.

build — предназначена для сборки приложения для продакшена, то есть все, что можно будет минимизировать — будет минимизиованно, а вместо версии vue (для разработчиков), будет использованна «ужатая» версия.

Запустим сервер для разработки фронта:

Так как стоит флаг —open, то должен будет открыться браузер по адресу 127.0.0.1:8080/

А теперь в отдельном терминале запустим наш бэк:

Попробуем открыть список языков 127.0.0.1:8080/api/languages/. Как и ожидалось, никакого списка языков нам не пришло. Нас все время выбрасывает на страницу с Vue приветствием. Как вы наверное догадались это потому что бэк у нас на одном порту, а сервер для фронта на другом. Чтобы решить эту проблему мы настроим прокси у фронт-сервера.

Открываем файлик webpack.config.js, находим строчки

и добавляем настройки прокси сервера, чтобы все запросы начинающиеся на api обрабатывались flask-сервером, которые у нас на 5000 порту:

Теперь перезапустим сервер для фронт-разработки:

Если открыть http://localhost:8080/ то окажемся на странице vue приветствия, а если открыть http://localhost:8080/api/languages то увидем список языков в json формате.

Красота! Теперь можно убрать страницу по умолчанию и что-нибудь стянуть с сервера.

Соединяем фронт с бэком.

В vue из коробки не встроен пакет для работы с ajax запросами. Поэтому, нужно установить какой-нибудь (я предпочитаю axios):

Флаг -S я добавил, чтобы модуль зафиксировался в качестве зависимости проекта в package.json.

Теперь нам нужно очистить файл static/src/App.vue от лишнего кода:

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

и отредактировать шаблон:

Если перезагрузить страницу, то мы ничего не увидим. Это потому, что список языков пустой. Воспользуемся библиотекой axios, чтобы получить список языков:

Так как мы используем фронт-сервер, он автоматически обновит код по мере его изменения, и сразу запросит список языков с сервера. Получим такую картинку:

Подведем итоги

Интегрировать vue с любым приложением, будь то flask, django или любой другой фреймворк, очень просто. Главный секрет заключается в настройки прокси для фронт-сервера и разработке при параллельной работе двух команд:

Одна отслеживает бэк, другая — фронт. Вот так все просто.

Vue.js: особенности, применение и отличия от других Javascript фреймворков

Релиз фреймворка Vue.js 2.0 состоялся еще в 2020 году, но многие владельцы технологических компаний и Javascript разработчики все еще не решаются использовать его в своих проектах. В этой статье мы рассмотрим ключевые моменты данного решения.

По Vue JS отзывы довольно положительные. Согласно опросу компании Monterail, 81% разработчиков отмечают простоту интеграции как основное преимущество фреймворка Vue, в т. ч. и интеграцию с backend фреймворками. Большинство специалистов считает, что освоить Vue намного легче чем другие популярные Javascript фреймворки. Документация — еще одна сильная сторона Vue — так считают 60% опрошенных разработчиков. Аналогичное число респондентов (56%) отмечает производительность данного решения как одну из его самых сильных сторон. Разберемся подробнее, что же такое Vue.js?

Описание фреймворка

Vue.js — это JavaScript библиотека для создания веб-интерфейсов с использованием шаблона архитектуры MVVM (Model-View-ViewModel).

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

  • Реактивные интерфейсы;
  • Декларативный рендеринг;
  • Связывание данных;
  • Директивы (все директивы имеют префикс «V-». В директиву передается значение состояния, а в качестве аргументов используются html атрибуты или Vue JS события);
  • Логика шаблонов;
  • Компоненты;
  • Обработка событий;
  • Свойства;
  • Переходы и анимация CSS;
  • Фильтры.
Топ-пост этого месяца:  От социальных кнопок Google нужно избавиться до 7 марта

Основная библиотека Vue.js 2 очень маленькая (всего 17 кБ). Это гарантирует, что нагрузка на ваш проект, реализованный с помощью Vue.js, минимальна, а ваш сайт будет быстро загружаться. Скачать соответствующий .js файл можно по ссылке.

Где применяется Vue.js

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

Vue также отлично подходит для крупных одностраничных приложений благодаря своим основным компонентам, таким как Router и Vuex. С Vue можно как использовать общедоступные API для создания приложений, так и реализовывать выполняемые сервером приложения. Но Vue лучше всего подходит для разработки решений, которые используют внешние API для обработки данных.

С помощью Vue также можно создавать frontend блога на популярных CMS. Vue.js отлично подходит и для разработки динамических интерфейсов, которые адаптируются под пользователя.

Vue.js: примеры лучших проектов

Рассмотрим некоторые крупные проекты, основанные на фреймворке Vue. Отметим сложности, с которыми столкнулись их разработчики, и что им дал переход на Vue.js.

Chess.com

Chess.com — самый посещаемый сайт игры в шахматы в мире с более чем 19 миллионами пользователей. Ресурс содержит раздел новостей, блог, сообщества, уроки, головоломки и возможность играть в шахматы в режиме реального времени.

Его legacy-код был реализован в PHP и Angular 1, поэтому возникали определенные сложности при работе с таким кодом. Команда проекта перешла с AngularJS на Vue. Благодаря простоте и быстродействию Vue.js, основателю Chess.com стало легче сотрудничать с его дистанционной командой, а на создание нового функционала ушло совсем немного времени.

Codeship

Codeship — это платформа для непрерывной интеграции, основанная на облачной технологии. Она позволяет хранить веб-приложения в облаке. Эту платформу используют такие гиганты, как Red Bull, CNN и Product Hunt.

Прежде чем Codeship перешел с jQuery на Vue, их пользователи постоянно сталкивались с зависанием и сбоями при работе с веб-приложением. У них был длинный список пользователей которые были недовольны работой приложения. Их история является отличным примером того, как Vue может помочь создать программное обеспечение с надежным и простым в обслуживании код.

Vue.js помог команде Codeship правильно организовать свой код и улучшить пользовательский интерфейс.

Livestorm

Livestorm — это веб-приложение для создания вебинаров. Оно помогает таким компаниям, как Workable, Pipedrive и Instapage продавать свои услуги или обучать клиентов с помощью вебинаров.

Livestorm — это пример Vue JS приложения,созданного с нуля. Благодаря Vue и его повторно используемым компонентам, их процесс разработки был быстрым и довольно простым.

Чем Vue.js отличается от Angular и React

Рассмотрим основные отличия фреймворка Vue от Angular и React.

Компоненты

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

Фреймворк против библиотеки

Angular — это фреймворк, а не библиотека, так как содержит четкие указания по структуре приложения, а также имеет широкую функциональность. Angular является полноценным решением для enterprise-приложений, которое не требует от вас анализа каких-либо других библиотек или применения дополнительных инструментов. React и Vue, с другой стороны, универсальны. Их библиотеки могут быть сопряжены со всеми типами пакетов, хотя у Vue их немного, так как он еще довольно молод.

Гибкость использования

Вы можете работать с React или Vue, просто добавив библиотеку Javascript в исходный код. Это невозможно в случае с Angular, так как он предназначен для более сложных задач. Когда же речь идет о микросервисах и микроприложениях, React и Vue предоставляют больше контроля над размером приложений, позволяя выбирать только те элементы, которые необходимы в конкретных случаях. Также они предлагают большую гибкость для перехода от одностраничных приложений к микросервисам, позволяя использовать части прежнего приложения. А Angular, благодаря своему широкому функционалу, лучше всего подходит для разработки самих одностраничных приложений.

Быстродействие и размер файлов

Фреймворк Angular довольно объемен. Из-за своего широкого функционала, размер архивированного файла составляет около 143k, по сравнению с более простыми Vue и React с 23K и 43k соответственно.

React и Vue имеют Virtual DOM (document object model), который создает копию объектного представления структурного документа и позволяет работать с визуальной копией, а не с самим представлением. Этот подход помогает повысить производительность фреймворков и таким образом ваше приложение будет работать быстрее. Vue, в частности, обладает отличной производительностью и глубоким распределением памяти, но все эти фреймворки в основном схожи по своим характеристикам.

В качестве вывода необходимо отметить, что основными преимуществами Vue JS является его простота и легкость изучения. Вместо того, чтобы изучать сложную терминологию и инструменты для создания простого приложения, как в случае с React, вы можете сразу приступать к разработке. Это делает Vue JS идеальным выбором для стартапов или любой команды разработчиков, которая хочет быстро создавать высокопроизводительные веб-приложения с легко читаемым кодом.

Создание приложения Vue.js с помощью инструментов Node.js для Visual Studio Create a Vue.js application using Node.js Tools for Visual Studio

Visual Studio поддерживает разработку приложений на базе платформы Vue.js с использованием JavaScript или TypeScript. Visual Studio supports app development with the Vue.js framework in either JavaScript or TypeScript.

Следующие новые функции поддерживают разработку приложений Vue.js в Visual Studio: The following new features support Vue.js application development in Visual Studio:

  • Поддержка блоков скриптов, стиля и шаблона в VUE-файлах Support for Script, Style, and Template blocks in .vue files
  • Распознавание атрибута lang в VUE-файлах Recognition of the lang attribute on .vue files
  • Шаблоны проектов и файлов Vue.js Vue.js project and file templates

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

У вас должна быть установлена среда Visual Studio 2020 15.8 или последующей версии и рабочая нагрузка Разработка Node.js. You must have Visual Studio 2020 version 15.8 or a later version installed and the Node.js development workload.

Для выполнения инструкций из этой статьи вам потребуются функции, доступные в Visual Studio 2020, начиная с версии 15.8. This article requires features that are only available starting in Visual Studio 2020 version 15.8.

Если у вас не установлена нужная версия, установите Visual Studio 2020. If a required version is not already installed, install Visual Studio 2020.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio , если вы еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Если вам нужно установить рабочую нагрузку, но вы уже используете 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.

Чтобы создать проект ASP.NET Core, вам нужны ASP.NET и рабочие нагрузки веб-разработки и кроссплатформенной разработки .NET Core. To create the ASP.NET Core project, you must have the ASP.NET and web development and .NET Core cross-platform development workloads installed.

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

Если она не установлена, установите версию LTS с веб-сайта Node.js. If you don’t have it installed, install the LTS version from the Node.js website. Как правило, Visual Studio автоматически обнаруживает установленную среду выполнения Node.js. In general, Visual Studio automatically detects the installed Node.js runtime. В противном случае вы можете указать в проекте ссылку на установленную среду на странице свойств. 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 and choose Properties).

Создание проекта Vue.js с помощью шаблона Create a Vue.js project using a template

Для создания проекта вы можете использовать новые шаблоны Vue.js. You can use the new Vue.js templates to create a new project. Использование шаблона — это самый простой способ приступить к работе. Use of the template is the easiest way to get started. Подробные инструкции см. в разделе Создание первого приложения Vue.js с помощью Visual Studio. For detailed steps, see Use Visual Studio to create your first Vue.js app.

Создание проекта Vue.js с ASP.NET Core и интерфейсом командной строки Vue Create a Vue.js project with ASP.NET Core and the Vue CLI

Vue.js предоставляет официальный интерфейс командной строки для быстрого формирования шаблонов проектов. Vue.js provides an official CLI for quickly scaffolding projects. Если вы хотите использовать интерфейс командной строки для создания приложения, выполните действия, описанные в этой статье, чтобы настроить среду разработки. If you would like to use the CLI to create your application, follow the steps in this article to set up your development environment.

Предполагается, что у вас уже есть опыт работы с платформой Vue.js. These steps assume that you already have some experience with the Vue.js framework. Если это не так, посетите Vue.js, чтобы узнать больше об этой платформе. If not, please visit Vue.js to learn more about the framework.

Создание проекта ASP.NET Core Create a new ASP.NET Core project

В этом примере используется пустое приложение ASP.NET Core (C#). For this example, you use an empty ASP.NET Core Application (C#). Но вы можете выбрать другие проекты и языки программирования. However, you can choose from a variety of projects and programming languages.

Создание пустого проекта Create an Empty project

Откройте Visual Studio и создайте новый проект. Open Visual Studio and create a new project.

Нажмите клавишу ESC, чтобы закрыть окно запуска. Press Esc to close the start window. Нажмите клавиши CTRL+Q, чтобы открыть поле поиска, введите asp.net и выберите Создать проект веб-приложения ASP.NET Core. Type Ctrl + Q to open the search box, type asp.net, then choose Create a new ASP.NET Core Web Application. В появившемся диалоговом окне введите имя client-app, а затем выберите команду Создать. In the dialog box that appears, type the name client-app, and then choose Create.

В верхней строке меню выберите Файл > Создать > Проект. From the top menu bar, choose File > New > Project. На левой панели диалогового окна Новый проект разверните узел Visual C# и выберите Интернет. In the left pane of the New Project dialog box, expand Visual C#, then choose Web. В средней области выберите Веб-приложение ASP.NET Core, присвойте ему имя client-app и нажмите кнопку ОК. In the middle pane, choose ASP.NET Core Web Application, type the name client-app, and then choose OK.

Если шаблон проекта Веб-приложение ASP.NET Core отсутствует, сначала установите рабочую нагрузку ASP.NET и разработка веб-приложений и рабочую нагрузку разработки NET Core. If you don’t see the ASP.NET Core Web Application project template, you must install the ASP.NET and web development workload and the .NET Core development workload first. Чтобы установить рабочую нагрузку, щелкните ссылку Открыть установщик Visual Studio в левой области диалогового окна Создать проект (выберите пункты Файл > Создать > Проект). To install the workload(s), click the Open Visual Studio Installer link in the left pane of the New Project dialog box (select File > New > Project). Запускается Visual Studio Installer. The Visual Studio Installer launches. Выберите необходимые рабочие нагрузки. Select the required workloads.

Выберите Пустой и нажмите OK. Select Empty, and then click OK.

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

Настройка файла запуска проекта Configure the project startup file

Откройте файл ./Startup.csи добавьте следующие строки в метод Configure: Open the file ./Startup.cs, and add the following lines to the Configure method:

Установка интерфейса командной строки Vue Install the vue CLI

Чтобы установить модуль npm vue-cli, откройте командную строку и введите npm install —g vue-cli или npm install -g @vue/cli для версии 3.0 (сейчас доступно в бета-версии). To install the vue-cli npm module, open a command prompt and type npm install —g vue-cli or npm install -g @vue/cli for version 3.0 (currently in beta).

Топ-пост этого месяца:  Как удалить все товары в OpenCart

Создание нового клиентского приложения по шаблону с помощью интерфейса командной строки Vue Scaffold a new client application using the vue CLI

Перейдите в командную строку и измените текущий каталог на корневую папку проекта. Go to your command prompt and change the current directory to your project root folder.

Введите vue init webpack client-app и выполните дальнейшие действия, чтобы указать дополнительные данные. Type vue init webpack client-app and follow steps when prompted to answer additional questions.

Для преобразования файлов .vue необходимо использовать WebPack или аналогичную платформу с загрузчиком. For .vue files, you need to use WebPack or a similar framework with a loader to do the conversion. С помощью TypeScript и Visual Studio выполнить компиляцию файлов .vue нельзя. TypeScript and Visual Studio does not know how to compile .vue files. Это же касается и объединения — с помощью TypeScript нельзя преобразовать модули ES2015 (т. е. операторы import и export ) в единый итоговый файл .js для загрузки в браузер. The same is true for bundling; TypeScript doesn’t know how to convert ES2015 modules (that is, import and export statements) into a single final .js file to load in the browser. Снова-таки, воспользуйтесь WebPack. Again, WebPack is the best choice here. Сделать это из среды Visual Studio с помощью MSBuild можно с помощью шаблона Visual Studio. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template. Сейчас готовые шаблоны ASP.NET для разработки Vue.js не предоставляются. At present, there is no ASP.NET template for Vue.js development in-the-box.

Изменение конфигурации webpack для вывода скомпилированных файлов в wwwroot Modify the webpack configuration to output the built files to wwwroot

Откройте файл ./client-app/config/index.js и измените build.index и build.assetsRoot на путь wwwroot: Open the file ./client-app/config/index.js, and change the build.index and build.assetsRoot to wwwroot path:

Указание проекта для сборки клиентского приложения при каждом запуске сборки Indicate the project to build the client app each time that a build is triggered

В Visual Studio перейдите в раздел Проект > Свойства > События сборки. In Visual Studio, go to Project > Properties > Build Events.

В командной строке событий перед сборкой введите npm —prefix ./client-app run build . On Pre-build event command line, type npm —prefix ./client-app run build .

Настройка имен модулей вывода webpack Configure webpack’s output module names

Откройте файл ./client-app/build/webpack.base.conf.js и добавьте следующие свойства для выходного свойства: Open the file ./client-app/build/webpack.base.conf.js, and add the following properties to the output property:

Добавление поддержки TypeScript с помощью интерфейса командной строки Vue Add TypeScript support with the Vue CLI


Для этих действий потребуется vue-cli 3.0 (в настоящее время существует как бета-версия). These steps require vue-cli 3.0, which is currently in beta.

Перейдите в командную строку и измените текущий каталог на корневую папку проекта. Go to your command prompt and change the current directory to the project root folder.

Введите vue create client-app и выберите Выбрать компоненты вручную. Type vue create client-app , and then choose Manually select features.

Выберите Typescript, а затем другие необходимые параметры. Choose Typescript, and then select other desired options.

Выполните оставшиеся шаги и ответьте на вопросы. Follow the remaining steps and respond to the questions.

Настройка проекта Vue.js для TypeScript Configure a Vue.js project for TypeScript

Откройте файл ./client-app/tsconfig.json и добавьте noEmit:true в параметры компилятора. Open the file ./client-app/tsconfig.json and add noEmit:true to the compiler options.

Этот параметр позволяет избежать загромождения проекта при каждой сборке в Visual Studio. By setting this option, you avoid cluttering your project each time that you build in Visual Studio.

Затем создайте файл vue.config.js в ./client-app/ и добавьте следующий код. Next, create a vue.config.js file in ./client-app/ and add the following code.

Приведенный выше код настраивает webpack и задает папку wwwroot. The preceding code configures webpack and sets the wwwroot folder.

Сборка с vue-cli 3.0 Build with vue-cli 3.0

Неизвестная проблема с vue-cli 3.0 может препятствовать автоматизации сборки. An unknown issue with the vue-cli 3.0 may prevent automating the build process. Каждый раз при попытке обновления папки wwwroot выполняйте команду npm run build в папке client-app. Each time that you try to refresh the wwwroot folder, you need to run the command npm run build on the client-app folder.

Кроме того, с помощью свойств проекта ASP.NET можно скомпилировать проект vue-cli 3.0 как событие перед сборкой. Alternatively, you can build the vue-cli 3.0 project as a pre-build event using the ASP.NET project properties. Щелкните проект правой кнопкой мыши, выберите Свойстваи добавьте следующие команды на вкладку Сборка в текстовом поле Командная строка события перед сборкой. Right-click the project, choose Properties, and include the following commands in the Build tab, in the Pre-build event command line text box.

Ограничения Limitations

Атрибут lang поддерживает только языки JavaScript и TypeScript. lang attribute only supports JavaScript and TypeScript languages. Допустимые значения: js, jsx, ts и tsx. The accepted values are: js, jsx, ts, and tsx.

Атрибут lang не работает с тегами шаблона или стиля. lang attribute doesn’t work with template or style tags.

Отладка блоков скрипта в VUE-файлах не поддерживается в связи с предварительной обработкой. Debugging script blocks in .vue files isn’t supported due to its preprocessed nature.

TypeScript не распознает VUE-файлы как модули. TypeScript doesn’t recognize .vue files as modules. Вам нужен файл, который содержит подобный код, чтобы сообщить TypeScript, как выглядят VUE-файлы (шаблон vue-cli 3.0 уже включает этот файл). You need a file that contains code such as the following to tell TypeScript what .vue files look like (vue-cli 3.0 template already includes this file).

Выполнение команды npm run build как события перед сборкой в свойствах проекта не работает при использовании vue-cli 3.0. Running the command npm run build as a pre-build event on the project properties doesn’t work when using vue-cli 3.0.

Работа tutorial vuex без Webpack

Есть документация по Vuex, и буквально сразу же идет туториал по созданию простейшего приложения с Vuex: http://vuex.vuejs.org/en/tutorial.html

Тут набросал, ровно тот туториал (в index.html пытался завести его): https://github.com/stranger-ru/vue-tutorial

Вроде все просто, но не могу понять, как можно его сделать (завести) без Webpack, и можно ли вообще сделать (завести) его без Webpack, подскажите?

1 ответ 1

Если вы собираетесь использовать однофайловые компоненты, то необходим Webpack для компиляции этих файлов в «нативный» JavaScript код. Если вы хотите использовать Vue без WebPack то необходимо в разметке HTML страницы подключить библиотеку Vue через

Спасибо за ваш ответ на Stack Overflow на русском!

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

Также, обратите внимание на заметку в справочном центре о том, как писать ответы.

Vue 2020: дорожная карта начинающего разработчика

Даже если вы новичок в разработке на Vue, вы, вероятно, слышали много относящихся к ней терминов, таких как одностраничные приложения (SPA, single-page apps), асинхронные компоненты (async components), рендеринг на стороне сервера (server-side rendering) и т. д.

Вы, вероятно, также слышали названия инструментов и библиотек, которые обычно упоминаются вместе с Vue: Vuex, Webpack, Vue CLI,Nuxt.

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

Попытка выучить все сразу обречена на провал, поэтому я и подготовил для вас эту высокоуровневую «карту знаний» со всеми ключевыми моментами изучения Vue. Вы можете использовать ее как руководство к действию и наконец-то разобраться в этой чудесной библиотеке.

0. JavaScript и базовые принципы веб-разработки

Если бы я попросил вас выучить от корки до корки книгу, написанную на китайском, вам бы сначала пришлось научиться читать по-китайски, верно?

Здесь то же самое. Vue – это JavaScript-фреймворк, следовательно, для успешной работы с ним нужно знать основы JavaScript и веб-разработки.

1. Основные понятия Vue

Если вы новичок в разработке на Vue, то начать следует с основ – ядра Vue-экосистемы, которое включает в себя библиотеку ядра (Vue core library), маршрутизатор (Vue Router) и Vuex.

Эти инструменты используются в большинстве приложений Vue.

Основные функции Vue

Основа Vue – синхронизация веб-страницы и JavaScript. Для этого используются реактивная привязка данных и ряд функций шаблонов: директивы и интерполяция. Именно с изучения этих понятий и следует начать.

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

Компоненты

Компоненты Vue – это изолированными элементами пользовательского интерфейса, которые можно повторно использовать при необходимости. Необходимо понимать, как объявлять компоненты и как наладить взаимодействие между ними с помощью свойств (props) и событий (events).

Компоненты – это основа для создания надежных масштабируемых Vue-приложений.

Одностраничные приложения

Одностраничная архитектура приложения (SPA) позволяет одной веб-странице работать как традиционный многостраничный веб-сайт без неэффективной перезагрузки при навигации.

Создав набор «страниц» в виде Vue-компонентов, вы можете сопоставить их с уникальными адресами (путями) с помощью Vue Router, инструмента, поддерживаемого командой Vue.

Управление состоянием

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

Специальный шаблон под названием» Flux » сохраняет ваши данные в предсказуемом и стабильном центральном хранилище. Реализовать этот шаблон помогает библиотека Vuex, также поддерживаемая командой Vue.

2. Vue в реальном мире

Все знания, полученные из первого модуля, можно использовать для создания высокопроизводительных и эффективных приложений Vue на локальном сервере. Однако как запустить их в продакшн?

Если вы хотите создавать продукты на основе Vue.js для реальных пользователей, вам нужно знать больше!

Скаффолдинг

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

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

Full-stack / приложения с аутентификацией

Реальные приложения Vue работают с данными, которые могут приходить из разных источников. Чаще всего – из безопасного API на Node, Laravel, Rails, Django или какой-либо другой серверной платформы.

Возможно, данные будут предоставлены обычным REST API или GraphQL, или это могут быть данные в реальном времени через веб-сокеты.

Вам следует ознакомиться с шаблонами проектирования, используемыми для интеграции Vue в full-stack конфигурацию, а также с различными рекомендациями по обеспечению безопасности пользовательских данных.

Ознакомьтесь с этой статьей, если вы не можете выбрать подходящий бэкэнд для вашего следующего приложения Vue.

Тестирование

Если вы хотите создавать ремонтопригодные и стабильные проекты, вам не следует забывать про тестирование.

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

Команда Vue поддерживает инструмент под названием Vue Test Utils, который позволяет создавать и запускать тесты для изолированных компонентов Vue.

Хотя тестирование E2E не связано с Vue, оно также может обеспечить надежность вашего проекта. Отличный инструмент E2E, который можно добавить в проект через Vue CLI 3 – Cypress.

Оптимизация

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

Чтобы оптимизировать приложение Vue, можно использовать различные методы, включая рендеринг на стороне сервера (server-side rendering). При этом приложение Vue выполняется на сервере, а пользователь получает конечный HTML-код.

Другие методы оптимизации включают использование асинхронных компонентов (async components) и функций визуализации (render functions).

3. Ключевые инструменты

Все, что было до сих пор, находится от в самом ядре Vue или хотя бы в экосистеме библиотеки. Но Vue не существует изолированно; это всего лишь один слой в стеке фронтенда. Senior Vue developer должен также быть знаком с рядом ключевых инструментов современной разработки.

Топ-пост этого месяца:  Как подтянуть гайки в коллективе с помощью Wrike

Современный JavaScript и Babel

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

Но для расширения возможностей можно использовать и более новые стандарты (ES2015, ES2020). Однако, если вы решите использовать современный JavaScript, браузеры большей части ваших пользователей с ним не справятся. Чтобы решить эту проблему, нужен Babel. Его задача состоит в том, чтобы «транспилировать» (перевести и скомпилировать) современные функции в стандартные аналоги перед отправкой приложения.

Webpack

Webpack – это сборщик модулей. Если ваш код написан в разных модулях (например, в разных файлах JavaScript), Webpack может «собрать» их в один файл (bundle) для браузера.

Webpack также работает как конвейер сборки, позволяя преобразовывать и оптимизировать его с помощью ряда плагинов (например, Babel, Sass или TypeScript).

Многие разработчики находят Webpack трудным для понимания и еще более трудным для настройки, но без него некоторые из лучших функций Vue, такие как однофайловые компоненты (single-file components), были бы недоступны.

В недавно выпущенном Vue CLI 3 было предоставлено решение для абстрагирования и автоматической настройки Webpack в проектах Vue.

Значит ли это, что вам не нужно изучать Webpack? Нет, так как однажды вам неизбежно потребуется настроить или отладить конфигурацию Webpack.

TypeScript

TypeScript – надмножество языка JavaScript, которое поддерживает типы (String, Boolean, Number и т.д.). Это помогает писать надежный код и отлавливать ошибки на ранней стадии

Vue.js 3, выходящий в 2020 году, будет полностью написан на TypeScript. Это не означает, что вы должны использовать его в своих проектах. Но если вы хотите внести свой вклад в Vue и понять его внутреннюю работу, знание TypeScript необходимо.

4. Vue-фрейморки

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

Существует много отличных фреймворков Vue, мы упомянем только три самых популярных и важных.

Nuxt.js

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

Nuxt.js предоставляет все это и еще больше (например, PWA) прямо из коробки.

Vuetify

Стандарт Material Design от Google – это широко используемая система рекомендаций по созданию красивых и логичных пользовательских интерфейсов.

Vuetify реализует ряд компонентов Vue (модальные окна, навбары, пагинацию и др.) в соответствии с этим стандартом.

NativeScript-Vue

Если вы хотите использовать Vue для нативных мобильных интерфейсов, вам нужен NativeScript-Vue.

NativeScript – это система для создания приложений с использованием собственных компонентов пользовательского интерфейса на iOS и Android, а NativeScript-Vue – это фреймворк поверх NativeScript, обеспечивающий использование синтаксиса и компонентов Vue.

5. Разное

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

Разработка плагинов

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

Анимация

Если вы любите создавать анимацию, обратите внимание на систему переходов Vue (transition system), которая является частью ядра библиотеки. Она обеспечивает анимацию при добавлении или удалении элементов из DOM.

Чтобы сделать переход, вы создаете классы CSS для определения нужного эффекта анимации, например, для затухания или изменения цвета. Vue определит, когда элемент добавляется или удаляется из DOM, и добавит или удалит соответствующие классы во время перехода.

Прогрессивные веб-приложения

Прогрессивные веб-приложения (PWA) похожи на обычные веб-приложения, но включают ряд современных функций, которые улучшают пользовательский опыт, например, автономное кэширование, серверный рендеринг, push-уведомления и т. д.

Переход с jQuery на Vue.js Зачем, как и что из этого вышло

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего.

Введение

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего. Если CSS хоть как-то собирался, был разбит на модули, то на некоторых проектах весь JavaScript хранился в одном файле длиной несколько тысяч строк, не минифицировался, и периодически встречались комментарии типа «Не лезь, оно тебя сожрет». В другом месте JS-функция иногда возвращала “trulio” вместо true. Большая часть кодовой базы была написана на jQuery, что тоже не упрощало работу.

Такой подход может использоваться на небольших проектах, когда кода немного, а релиз один. Но, при развитии проекта и постоянных доработках, это быстро превращается в проблему. Для того, чтобы сделать задачу, нужно сначала найти место в файле (на это действительно может уходить много времени!), проверить зависимости, понять, что изменение функциональности в одном месте, не сломает ее в другом. В итоге, задачи делаются медленно, а количество ошибок растет пропорционально росту проекта.

Постепенно, мы занялись созданием сборки фронтенда, начали с минификации (сжатия) и транспиляции (трансформации кода таким образом, чтобы он работал в старых браузерах) JavaScript с помощью популярного сборщика Gulp. Позже стали разбивать код на модули. С 2020 года мы начинали постепенно внедрять php-фреймворк Laravel. Кстати, создатели Laravel (Taylor Otwell) и Vue.js (Evan You) много общаются и выступают на конференциях друг у друга.

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

Почему Vue

Vue.js – это прогрессивный фреймворк для создания пользовательских интерфейсов. Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз.

Почему мы выбрали именно его?

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

Во-вторых, Vue довольно легко интегрируется с Laravel, backend-фреймворком, который мы используем.

Как работает Webpack и Vue.js?

Здравствуйте!
При разработке приложения на vue.js наткнулся на vue-cl где нашёл шаблон webpack-simple. Выполнил команды npm nsstall и npm run dev и вот чудо! У меня запустился сервер на 3000 порте.

Возникает вопрос: как? И можно ли такой проект залить на хостинг? Если да то на какой?

Всем спасибо! Вопрос закрыт.

  • Вопрос задан более двух лет назад
  • 1390 просмотров

О боги, этот человек на днях допытывал народ о Server-rendering. Хорошо что внял совету и пошел учить основы)))

Это dev сервер, предназначенный для разработки. Когда соберешь проект, можешь размещать его где угодно.

Webpack-dev-server просто раздал вам статический index.html и bundle.js со всем vue-приложением внутри
Любой хостинг способный раздавать статические файлы пойдет

Если же вы хотите знать, как работает сервер в целом, то это к Webpack’у и уж тем более Vue имеет весьма посредственное отношение.

Можем ли мы сделать приложение vue.js без компонента расширения.vue и webpack?

Примечание. Можем ли мы написать большое приложение vue.js без использования какого-либо компилятора для кода, например, в настоящее время я вижу, что все примеры используют webpack сейчас, чтобы сделать код vue.js совместимым для браузера.

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

Поскольку мы .vue компонент в расширение .vue можно сделать компонент в расширении .js и использовать приложение, как в угловом 1, где мы можем сделать цельное приложение без какого-либо транскомпилятора для преобразования кода.

Это можно сделать только в html, css, js файле и без каких-либо веб-пакетов.

Что я сделал. index.js

main.js этот файл добавлен в время загрузки webpack

App.vue

маршрутизатор

Я сделал что-то подобное. Можем ли мы сделать это только с помощью html, css, js файла, а не с помощью webpack для компиляции кода. Как и в угловом 1.

Как указано в этом jsFiddle: http://jsfiddle.net/posva/wtpuevc6/, вы не обязаны использовать файлы webpack или.vue.

Код ниже не от меня, и весь кредит принадлежит этому создателю jsFiddle:

Создайте файл index.html:

Home.js

foo.js

router.js

index.js

Оцените рамки.

Просто файл sidenote: .vue действительно потрясающий, вам обязательно нужно попробовать их, если не использовать их не является требованием

Я также начал изучать vue.js, и я не знаком с веб-пакетом и прочим, и я также хотел разделить и использовать файлы .vue, так как это делает управление и код чище.

Я использую его, и, кажется, работает нормально.

Конечно, вы можете. Мы выполнили проект с Vue, и у нас было несколько проблем при компиляции файлов .vue . Таким образом, мы перешли на структуру с тремя отдельными файлами.

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

Используя эти модули, вы можете написать примерно следующее:

component.js

component.css

component.html

НО

Вам нужно знать, что HTML файл должен быть написан так же, как и у вас в свойстве template .

Кроме того, взгляните на это репо, возможно, вы найдете что-то полезное здесь

Vue-html-loader. Это вилка от html-loader от основной команды Vue.

Вы можете прекрасно, но с большим количеством недостатков. Например: вы не можете легко использовать любой препроцессор, такой как Sass или Less; или TypeScript или передайте исходный код с помощью Babel.

Если вам не нужна поддержка старых браузеров, вы можете использовать модули ES6 сегодня. Почти все браузеры поддерживают это. См.: ES6-Модуль. Но Firefox не поддерживает динамический импорт(). Только Firefox 66 (Nightly) поддерживает его и должен быть включен. И если этого недостаточно, ваше веб-приложение не будет проиндексировано. Это плохо для SEO. Например, робот Googlebot может сканировать и индексировать код Javascript, но все еще использует более старый Chrome 41 для рендеринга, и его версия не поддерживает модули ES6.

Если это не является недостатком для вас, то вы можете сделать это:

1 — Удалите все сторонние библиотеки импорта, такие как Vue, VueRouter и т.д. И включите их в файл index.html, используя теги сценария. Все глобальные переменные доступны во всех модулях es6. Например, удалите эту строку из main.js и всех файлов .vue:

И добавьте эту строку в ваш index.html:

2 — Переписать все файлы .vue и изменить расширение файла на .js. Например, переписать что-то вроде этого:

Чтобы что-то вроде этого:

3 — это все. Я положил пример в этой ссылке

PS Редактирование текста без подсветки синтаксиса может быть разочаровывающим. Если вы используете Visual Studio Code, вы можете установить расширение Template Literal Editor. Это позволяет редактировать буквенные строки с подсветкой синтаксиса. Для стилей выберите синтаксис CSS, а для шаблонов синтаксис HTML. Неизвестный тег в HTML подсвечивается по-разному. Для решения этой проблемы измените цвет темы. Например, установите цветную тему Brackets Dark Pro или любую понравившуюся вам тему.

Vue.js старт нового проекта

Старт нового прокта обычно начинается с инициализации node init, и добавления зависимостей. Но в Vue.js есть большое количество шаблонов проектов.

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

Доступные варианты в стандартном комплекте

webpack — Полнофункциональный Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

webpack-simple — Простой Webpack + vue-loader для быстрого прототипирования.

browserify — Полнофункциональный Browserify + vueify setup with hot-reload, linting & unit testing.

browserify-simple — Простой Browserify + vueify для быстрого прототипирования.

simple — Максимально простой Vue скрипт в одном HTML файле

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

Простые версии — система сборки, с упрощенной версией, где приложение в одном файле и отстутствует тестирование.

Простая версия — один файл, в котором с cdn подключена библиотека vue.js и сделана заготовка приложения.

Все версии включают в себя сервер разработчика (минимальный live-server), которые следят за изменениями и перезагружают страницу. Но делают это по разному, простой — полное обновление.

Для начала лучше попробовать максимальную версию webpack, и на основе нее собрать свой вариант.

Будут задаваться вопросы для описания пакета и включения систем сборки, например scss компилятора

Использование своей сборки. username/repo GitHub repo shorthand for your fork

Подробнее про синтаксис и создание шаблонов описано на странице документации, vue-cli

Прочитать описание шаблонов и примеры их использования на странице vuejs-templates

Добавить комментарий