Как открыть проект vue js на visual studio code

Обновлено: 07.01.2025

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

В этом посте я собираюсь продемонстрировать, как настроить VS Code для работы с Vue. Я собираюсь показать, как использовать ESLint и Prettier для линтинга и форматирования вашего кода и как использовать инструменты браузера Vue, чтобы взглянуть на то, что происходит в приложении Vue. Когда вы закончите чтение, у вас будет настроена рабочая среда разработки, и вы будете готовы начать программировать приложения Vue, как начальник.

Давайте доберемся до этого!

Установка и настройка вашего редактора

Я сказал, что собираюсь использовать VS Code для этого урока, но боюсь, что солгал. На самом деле я собираюсь использовать VSCodium , который является форком открытого кода VS Code без брендинга, телеметрии и лицензирования Microsoft. Проект находится в стадии активной разработки, и я рекомендую вам проверить его.

Неважно, какой редактор вы используете, чтобы следовать; оба доступны для Linux, Mac и Windows. Вы можете скачать последнюю версию VSCodium здесь или скачать последнюю версию VSCode здесь и установить ее в соответствии с вашей операционной системой.

Во всей оставшейся части этого руководства для согласованности я буду называть редактор VS Code.

Добавьте расширение Vetur

Когда вы запустите редактор, вы увидите набор из пяти значков на панели инструментов в левой части окна. Если щелкнуть нижнюю часть этих значков (квадратную), откроется панель поиска, которая позволит вам искать в VS Code Marketplace . Введите «vue» в строку поиска, и вы увидите десятки расширений в списке, каждое из которых утверждает, что делает что-то немного другое.

В зависимости от вашего варианта использования, вы можете найти что-то подходящее для вас. Есть много доступных. Например, TSLint для Vue может быть полезен, если вы работаете над проектом Vue с использованием TypeScript. Сейчас я собираюсь сосредоточиться на одном под названием Vetur .

Введите «Vetur» в поле поиска и выберите пакет, созданный Pine Wu. Затем нажмите Установить .

После того, как расширение установлено, нажмите Обновить, чтобы активировать, и вы в деле.

Изучение особенностей Vetur

Если вы посетите домашнюю страницу проекта , вы увидите, что расширение предоставляет вам ряд функций:

• подсветка синтаксиса
• обрывки
• муравей
• линтинг / проверка ошибок
• форматирование
• автозаполнение
• отладка

Давайте посмотрим некоторые из них в действии сейчас.

Примечание. Многие из этих функций работают только при настройке проекта. Это означает, что вам нужно создать папку, содержащую ваши файлы Vue, открыть папку с помощью VS Code и получить доступ к файлам через проводник VS Code.

Подсветка синтаксиса

По мере роста вашего приложения вы, несомненно, захотите использовать однофайловые компоненты (SFC) для организации своего кода. Они имеют окончание .vue Без Vetur вот как выглядит SFC в VS Code:

Однако при установке Vetur это будет выглядеть так:

обрывки

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

Это также идет с некоторыми собственными фрагментами. Например, попробуйте ввести «scaffold» (без кавычек) в область за пределами языковой области, и она сгенерирует весь код, необходимый для работы с SFC:

муравей

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

Короче говоря, Emmet позволяет вам расширять различные сокращения на куски HTML или CSS. Vetur поставляется с включенным по умолчанию.

Попробуйте щелкнуть в области <template>

Затем нажмите Tab . Это должно быть расширено до этого:

Проверка ошибок / Linting

Из коробки Vetur предлагает базовую проверку ошибок. Это может быть удобно для обнаружения опечаток в вашем коде.

В приведенном выше примере Vetur заметил, что я забыл двоеточие после имени свойства объекта и, следовательно, подчеркнул его красным. Открыв панель ошибок (нажмите на маленький крестик в нижнем левом углу), вы получите описание ошибки.

Vetur также использует eslint-plugin-vue для размещения шаблонов. Мы узнаем больше о том, почему написание кода является хорошей идеей в следующем разделе, но сейчас давайте просто посмотрим на это в действии.

Давайте добавим ключ items data

Затем добавьте код для вывода в нашем шаблоне:

Сразу же мы увидим, что <li v-for="item in items"> Что дает?

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

Ошибка, кажется, в том, что мы забыли объявить ключ . Давайте исправим это:

И ошибка исчезает из нашего редактора.

IntelliSense

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

Вы можете попробовать это, щелкнув в области <template> Вы должны увидеть это:

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

Это еще не все, что может сделать Vetur, но мы оставим расширение и обратим наше внимание на настройку проекта с помощью интерфейса командной строки Vue.

Пример проекта с Vue CLI

При создании нового приложения Vue лучший способ быстро начать работу — использовать Vue CLI . Это утилита командной строки, которая позволяет вам выбирать из целого ряда инструментов сборки, которые затем она будет устанавливать и настраивать для вас. Это также положит начало вашему проекту, предоставляя вам предварительно сконфигурированную отправную точку, на которой вы можете строить, а не начинать все с нуля.

Примечание: если CLI является новым для вас, вы можете обратиться к нашему руководству « Руководство для начинающих по Vue CLI » в этой серии Vue.

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

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

И создайте новый проект Vue с помощью команды:

Откроется мастер, который попросит вас выбрать пресет. Выберите, чтобы выбрать функции вручную, а затем принять значения по умолчанию для всего, кроме того, когда вас попросят выбрать конфигурацию linter / formatter. На этом шаге обязательно выберите ESLint + Prettier и Lint при сохранении и поместите файлы конфигурации в package.json

Linting Ваш код с ESLint

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

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

Примечание. Если вы хотите глубже погрузиться в ESLint, ознакомьтесь с нашей статьей « Запуск и работа с ESLint — подключаемым JavaScript-линтером ».

Если вы посмотрите на свойство devDependencies package.json eslint-plugin-vue . Это официальный плагин ESLint для Vue.js, который может обнаруживать проблемы с кодом в ваших .vue

Давайте проверим это.

Запустите сервер Vue dev с помощью команды npm run serve localhost: 8080 .

В VS Code откройте проект, который вы только что создали с помощью CLI ( Файл > Открыть папку ), затем перейдите к src/components/HelloWorld.vue Давайте добавим метод к нашему экземпляру Vue:

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

Это связано с тем, что в Vue CLI настроен ESLint для использования набора правил eslint:recommended Это включает любые правила, помеченные галочкой на странице правил ESLint , одним из которых является no-console .

Хотя хорошо, что CLI показывает нам ошибки ESLint в терминале, разве не было бы лучше, если бы мы могли видеть их и в нашем редакторе? Ну, к счастью, мы можем. Вернитесь в код VS, щелкните значок расширений и введите «ESLint» (без кавычек). Лучший результат должен быть для пакета с именем ESLint от Dirk Baeumer . Установите это и перезапустите VS Code.

Наконец, вам нужно отредактировать настройки кода VS. Перейдите в File > Preferences > Settings и отредактируйте файл User Settings и добавьте следующую конфигурацию:

Это сообщит плагину ESLint, который мы только что установили, для проверки файлов .vue

При желании вы можете отключить это (или любое) правило в разделе rules: <> package.json

Форматирование вашего кода с красивее

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

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

Работа Prettier в сочетании с Vue CLI аналогична ESLint. Чтобы увидеть его в действии, давайте удалим точку с запятой в конце console.log("hi"); утверждение из нашего предыдущего примера. Это должно отобразить предупреждение в терминале:

Он также будет отображать предупреждение в VS Code благодаря плагину ESLint, который мы установили ранее.

Мы также можем сделать, чтобы Преттиер исправлял любые ошибки форматирования для нас всякий раз, когда мы сохраняем файл. Для этого перейдите в File > Preferences > Settings и отредактируйте файл User Settings, чтобы добавить следующую конфигурацию:

Теперь, когда вы нажимаете сохранить, все будет отформатировано в соответствии со стандартным набором правил Преттье .

Обратите внимание, что вы можете настроить несколько правил в Prettier через ключ "prettier" package.json

Например, приведенное выше отключит правило точки с запятой.

Вы можете прочитать больше о параметрах конфигурации здесь .

Инструменты Vue Browser

В этом разделе я хочу взглянуть на devtools Vue.js, которые доступны как плагин для браузера для Chrome и Firefox , а также как кроссплатформенное приложение Electron , которое также может отлаживать приложения Vue, работающие на мобильных устройствах. ,

Установив их, вы можете получить к ним доступ, посетив работающее приложение Vue, открыв консоль браузера и нажав кнопку Vue . Затем вы увидите три следующих раздела: Компоненты , Vuex и События .

Первый раздел дает вам иерархическое представление всех компонентов, составляющих ваше приложение. Выбор компонента из дерева позволяет вам проверить его состояние (например, props Некоторые из его значений (например, объект data

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

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

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

Вывод

И это упаковка. В этом руководстве я продемонстрировал, как установить плагин Vetur для VS Code, и рассказал о некоторых его функциях. Я также показал, как использовать Vue CLI для создания проекта и как использовать ESLint и Prettier для обеспечения качества и согласованности кода. Мы также кратко рассмотрели инструменты браузера Vue и увидели, как проверить состояние работающего приложения Vue, что важно для целей отладки.

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

Visual Studio Code - один из наиболее часто используемых редакторов кода в мире прямо сейчас. Когда вы такой популярный редактор, люди создают хорошие плагины. Один из таких плагинов - отличный инструмент, который может помочь нам, разработчикам Vue.js.

Visual Studio Code - один из наиболее часто используемых редакторов кода в мире прямо сейчас. У редакторов, как и у многих программных продуктов, есть цикл. Когда-то фаворитом разработчиков был TextMate, затем Sublime Text, теперь VS Code.

Самое замечательное в популярности состоит в том, что люди посвящают много времени созданию плагинов для всего, что они представляют.

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

Ветур

Это называетсяВетур, он очень популярен, его скачали более 3 миллионов раз, и вы можете найти егов Visual Studio Marketplace.

Установка Vetur

Нажатие кнопки Install вызовет панель установки в VS Code:

Вы также можете открыть расширения в VS Code и выполнить поиск по запросу «vetur»:

Что дает это расширение?

Подсветка синтаксиса

Vetur обеспечивает подсветку синтаксиса для всех файлов исходного кода Vue.

Без Vetur файл .vue будет отображаться VS Code следующим образом:

с установленным Vetur:

VS Code может распознавать тип кода, содержащегося в файле, по его расширению.

Используя однофайловый компонент, вы смешиваете разные типы кода внутри одного файла, от CSS до JavaScript и HTML.

VS Code по умолчанию не может распознать такую ситуацию, а Vetur позволяет выделять синтаксис для каждого типа кода, который вы используете.

Vetur предоставляет поддержку, среди прочего, для

Фрагменты

Как и в случае с подсветкой синтаксиса, поскольку VS Code не может определить тип кода, содержащегося в части файла .vue, он не может предоставить фрагменты, которые мы все любим: фрагменты кода, которые мы можем добавить в файл, предоставляемые специализированными плагинами.

Vetur предоставляет VS Code возможность использовать ваши любимые фрагменты в однофайловых компонентах.

IntelliSense

IntelliSense также включен, Vetur, для каждого отдельного языка с автозаполнением:

Строительные леса

Помимо включения настраиваемых сниппетов, Vetur предоставляет собственный набор сниппетов. Каждый из них создает определенный тег (шаблон, скрипт или стиль) на своем собственном языке:

• vue
• template with html
• template with pug
• script with JavaScript
• script with TypeScript
• style with CSS
• style with CSS (scoped)
• style with scss
• style with scss (scoped)
• style with less
• style with less (scoped)
• style with sass
• style with sass (scoped)
• style with postcss
• style with postcss (scoped)
• style with stylus
• style with stylus (scoped)

Если вы напечатаете vue , вы получите стартовый пакет для однофайлового компонента:

другие специфичны и создают единый блок кода.

Примечание: (с ограничением) означает, что он применяется только к текущему компоненту

Эммет

Эмметпо умолчанию поддерживается популярный механизм сокращений HTML / CSS. Вы можете ввести одно из сокращений Эммета и, нажав tab VS Code автоматически расширит его до эквивалента HTML:

Линтинг и проверка ошибок

Форматирование кода

Vetur обеспечивает автоматическую поддержку форматирования кода для форматирования всего файла при сохранении (в сочетании с "editor.formatOnSave" Настройка VS Code.

Вы можете отключить автоматическое форматирование для определенного языка, установив параметр vetur.format.defaultFormatter.XXXXX к none в настройках VS Code. Чтобы изменить одну из этих настроек, просто начните поиск строки и переопределите то, что вы хотите в пользовательских настройках (правая панель).

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

Использует вашу конфигурацию Prettier для определения ваших предпочтений.

В этой статье мы познакомимся с 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 . Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.

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

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

  Введите эту команду в терминал:

  
  

  Цель замены системы сборки – снижение стартового барьера для освоения Vue.js за счет уменьшения количества применяемых инструментов при создании современных веб-приложений.

  Кроме того, существенно упрощается процесс отладки приложений, сильно сокращается время на пересборку приложения, а для части сценариев работы — пересборка не требуется совсем.
  
  Содержание

  Webpack – очень мощный и полезный инструмент, который позволяет делать практически всё. Вам, рано или поздно, придется его освоить, если собираетесь заниматься веб-разработкой серьезно.

  Но когда изучаешь Vue.js одновременно с TypeScript, очень хочется убрать лишних посредников. Хотя бы при освоении новых технологий и на простых задачах. Сложно разбираться c TypeScript, когда получаемый на выходе код является результатом переваривания кучей фильтров и конверторов Webpack.
  

  «Прежде, чем объединяться, и для того, чтобы объединиться, мы должны сначала решительно и определенно размежеваться». В.И. Ленин

  В нашем проекте TryVue без Webpack: большую часть работы по сборке и установлению взаимосвязей между модулями будет делать штатный компилятор TypeScript, загрузку модулей во время исполнения – System.js, конкатенацию шаблонов и файлов CSS – Bundler&Minifier (почти штатное расширение к VS2017).

  Функции каждого участника процедуры сборки приложения четко определены, а артефакты легко посмотреть и убедиться, что полученное соотвествует вашим ожиданиям.

  Сначала собираем модульное приложение с использованием Webpack. Затем переводим полученное приложение с Webpack на сборку штатным компилятором TypeScript + Bundler&Minifier.

  
  
  

  Создание стартовой болванки

  
  

  В новом проекте создаем стартовую страницу wwwroot\index.html, в которой определяем место внедрения приложения Vue.js, а также загружаемый js-файл.

  Сейчас можно проверить, что приложение почти запускается (VS2017 запустит IIS Express, в браузере отобразится «loading. »).

  Добавление программного кода

  Теперь добавляем в приложение vue-компоненты и другой необходимый код для компиляции и работы приложения.

  В каталоге ClientApp\components создаем 6 файлов для двух vue-компонент. Для каждой компоненты стили CSS и код TypeScript выносим в отдельные файлы, а в vue-файле оставляем только шаблон (плюс ссылки на css, ts). Однофайловые Vue-компоненты в чистом виде применять не будем (чтобы не ставить плагин для подсветки синтаксиса и т.д.).

  В каталоге ClientApp создаем файл index.ts, используемый как точка входа в приложение, а также заглушку vue-stub.ts, которая позволит компилятору TypeScript понимать, что делать с vue-модулями.

  скрытый текст ClientApp\index.ts, ClientApp\vue-stub.ts

  Добавление файлов конфигурации

  Определяем конфигурацию NPM (менеджера пакетов Node.js), компилятора TypeScript, а также Webpack.

  Добавляем в проект файл конфигурации NPM под именем package.json. Если у вас включено автоматическое обновление NPM-пакетов, учтите, что обновление может идти долго. Кроме того, возможен сбой при обновлении. В случае сбоя придется повторить восстановление пакетов, а лучше закрыть VS2017 и установить NPM-пакеты из командной строки.

  Добавляем в проект файл конфигурации TypeScript под именем tsconfig.json, в котором определяются опции компилятора (compilerOptions) и каталог, в котором компилятор будет искать «свои» файлы (include).

  Добавляем в проект файл JavaScript под именем webpack.config.js, в котором определяются входные/выходные файлы и способы их обработки.

  Сборка и запуск приложения

  Остается проверить работоспособность сделанного. Закрываем Visual Studio и через командную строку в каталоге проекта выполняем следующее:

  
  В браузере идем по указанному адресу, например, localhost:52643. В вашем случае порт наверняка будет другим. Должны получить что-то подобное изображенному на скриншоте.

  
  

  Этот способ сборки и запуска приложения далеко не самый удобный, но его было проще описать. Запускать полученное приложение можно прямо из VS2017 (Ctrl+F5) или просто открывать в браузере файл wwwroot\index.html.

  Со сборкой чуть посложнее. Если потребуется часто запускать скрипты сборки из package.json, попробуйте NPM Task Runner – достаточно популярное расширение к VS2017.

  Желающие могут посмотреть внимательно на файл wwwroot\dist\build.js. Это файл у меня имеет размер 893kB, там код нашего приложения собран вместе с кодом vue.esm.js. Причем сборщик туда закопал не только наш код JavaScript, но также и CSS. Если в этом файле поставить в нужном месте точку остановки и походить отладчиком, то можно увидеть, что Webpack выполняет массу полезной работы. Обеспечивает инициализацию компонент с учетом зависимостей, кэширует вызовы и т.д.

  Встроенный отладчик VS2017 на ts-файлах работать не будет, если оставить webpack.config.js без изменений. После некоторых изысканий нашел, что отладчик начинает работать если установить опцию вместо . Так как этот конфиг я взял у большого гуру, а сам не хочу разбираться на что ещё влияет эта опция, то оставил исходную версию.

  Создание стартовой болванки

  Процедура создания стартовой заготовки для проекта TryVue идентична ранее описанной процедуре для проекта TryVueWebpack. Стартовую страницу wwwroot\index.html поправим позже.

  Копирование программного кода

  Полностью копируем папку ClientApp из сделанного в предыдущем разделе проекта. Удаляем файл ClientApp/vue-stub.ts.

  Меняем расширение имени файлов *.vue -> *.html. Затем в этих файлах удаляем тэги <script /> и <style />, прописываем значения id для <template /> (внутренности шаблонов оставляем без изменений). В результате получим следующее:

  Теперь у нас «мухи — отдельно, котлеты — отдельно», в смысле: шаблоны лежат отдельно от ts-кода компонент. Поэтому в ts-коде самих компонент надо в свойство «template» прописать идентификторы своих шаблонов.

  Окончательно убираем следы однофайловых vue-компонент, исправив ссылки в директивах импорта файлов ClientApp/AppHello.ts, ClientApp/index.ts.

  Добавление файлов конфигурации и компиляция

  Добавляем в проект файл конфигурации NPM под именем package.json. На этот раз нам достаточно указать только пакет Vue. Обычно новые NPM-пакеты после изменения в package.json устанавливаются автоматически. В противном случае — вызвать команду восстановления пакетов принудительно.

  
  Добавляем в проект файл конфигурации TypeScript под именем tsconfig.json и прописываем необходимые параметры.

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

  Именно опция «module» компилятора TypeScript (при значении «amd» или «system») позволяют нам отказаться от Webpack. Посмотрите на файл wwwroot/dist/main.js после компиляции проекта со значениями , затем .

  Файл с результатами работы TypeScript компилятора содержит последовательность вызовов функции define() или System.register(). В параметрах вызова функций можно увидеть определение зависимости модулей друг от друга.

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

  Сборка шаблонов и CSS

  Со сборкой JavaScript в bandle разобрались. Теперь надо сделать бандлы vue-шаблонов и CSS. Для этого можно действовать совсем тупо — использовать команду copy (конкатенация — она и в Африке конкатенация):

  
  Но, боюсь, меня тут неправильно поймут. Обычно принято такие вещи делать при помощи Gulp или Grunt. Также применяется специальное расширение для Visual Studio — Bundler&Minifier. Надеюсь, с установкой и применением этого расширения справитесь. Привожу bundleconfig.json для нашего случая:

  Создание index.html и запуск приложения

  После выполнения описанного выше, в каталоге wwwroot\dist должны получить три бандла: main.js, main.css, app-templates.html. Остается только сделать index.html, который обеспечит их использование.

  Подключаем стили, добавив в <head /> ссылку на main.css:

  
  Загружаем файл с vue-шаблонами с самом начале <body />, затем определяем точку внедрения приложения Vue.js:

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

  
  Запуск полученного приложения в среде Visaul Studio — обычный (например: F5). Нормально работает встроенный отладчик VS2017, причем точки остановки можно ставить и в коде ts-модулей.

  Отказ от Webpack при разработке Vue.js-приложений, позволил вести разработку и отладку исключительно в привычной среде VS2017. В получении бандлов участвует только TypeScript и конкатенатор.

  Для сравнения — в случае использования Webpack, в процедуре сборки участвуют, как минимум: webpack, typescript, ts-loader, css-loader, sass-loader, vue-loader, vue-style-loader, vue-template-compiler, vue-template-es2015-compiler, vue-hot-reload-api. Всего в каталоге node_modules: более 400 пакетов объемом около 80 Мб.

  Правда, для production-версии полезно vue-шаблоны компилировать в рендер-функции, поэтому посредники для нашего случая тоже потребуется. Но, всё равно, без Webpack их будет значительно меньше.

  Читайте также:

    
  • Программа для прошивки хендай крета
    
  • Вебекс конференция как создать задний фон в браузере
    
  • Как зайти в vmware через браузер
    
  • Что такое браузер амиго
    
  • Пин код 16 цифр не вводится 1с