Как установить vue cli на Windows

Обновлено: 07.07.2024

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

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

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

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

Хотите изучить Vue.js с нуля? Эта статья является выдержкой из нашей библиотеки Premium. Получите всю коллекцию книг по Vue, охватывающую основы, проекты, советы, инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за 9 долларов США в месяц.

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

В этом разделе мы рассмотрим требования, необходимые для Vue CLI v3, и способы его установки.

Требования

Начнем с требований. Vue CLI v3 требует Node.js 8.9+, но рекомендуется v8.11.0+.

Вы можете установить последнюю версию Node.js различными способами:

Загрузив двоичные файлы для своей системы с официального сайта.
С помощью официального диспетчера пакетов для вашей системы.
Использование диспетчера версий. Это, вероятно, самый простой способ, так как он позволяет вам управлять несколькими версиями Node на одном компьютере. Если вы хотите узнать больше об этом подходе, ознакомьтесь с нашим кратким советом по установке нескольких версий Node.js с помощью nvm.

Эван Ю, создатель Vue, назвал третью версию интерфейса командной строки «совершенно отличным от своего предшественника зверем». Поэтому важно удалить все предыдущие версии интерфейса командной строки (то есть 2.x.x) перед тем, как приступить к этому руководству.

Если в вашей системе глобально установлен пакет vue-cli, вы можете удалить его, выполнив следующую команду:

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

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

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

После успешной установки интерфейса командной строки вы сможете получить доступ к исполняемому файлу vue в своем терминале.

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

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

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

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

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

Подсказка: example-vue-project — это название проекта. Разумеется, вы можете выбрать любое допустимое имя для своего проекта.

CLI предложит вам предустановку, которую вы хотите использовать для своего проекта. Один из вариантов — выбрать предустановку по умолчанию, которая устанавливает два плагина: Babel для транспиляции современного JavaScript и ESLint для обеспечения качества кода. Или вы можете вручную выбрать функции, необходимые для вашего проекта, из набора официальных плагинов. К ним относятся:

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

Теперь давайте рассмотрим другие сценарии для обслуживания проекта (используя сервер разработки webpack и горячую перезагрузку модуля) и сборки проекта для производства.

Перейдите в папку вашего проекта:

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

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

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

Это выведет все в папку dist внутри вашего проекта. Подробнее о развертывании можно прочитать здесь.

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

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

Он предоставляет несколько сценариев для работы с проектами Vue, например сценарии serve , build и inspect.

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

Как видите, это дает много результатов. Позже мы увидим, как настроить конфигурацию веб-пакета в проекте Vue CLI.

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

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

Давайте посмотрим на важные файлы и папки в проекте Vue при использовании пресета по умолчанию.

публичный . Эта папка содержит общедоступные файлы, такие как index.html и favicon.ico. Любые статические ресурсы, размещенные здесь, будут просто скопированы и не будут проходить через веб-пакет.
источник . Эта папка содержит исходные файлы для вашего проекта. Большая часть работы будет выполнена здесь.
источник/активы . Эта папка содержит ресурсы проекта, такие как logo.jpg .
источник/компоненты . Эта папка содержит компоненты Vue.
src/App.vue . Это основной компонент Vue проекта.
src/main.js . Это основной файл проекта, который загружает приложение Vue.
babel.config.js . Это файл конфигурации для Babel.
package.json . Этот файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
узловые_модули . Эта папка содержит установленные пакеты npm.

Это скриншот анатомии проекта:

Плагины Vue CLI

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

Что такое плагин Vue

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

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

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

Официальные подключаемые модули Vue CLI 3 включают:

Машинопись
Интерактивное веб-приложение
Векс
Вью-маршрутизатор
ESLint
Модульное тестирование и т. д.

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

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

Вы можете установить множество встроенных подключаемых модулей в проект при его инициализации, а также установить любые другие дополнительные подключаемые модули в проекте с помощью команды vue add my-plugin в любой момент вашего проекта.

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

Некоторые полезные плагины Vue

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

Я также написал несколько плагинов, которые вы можете использовать:

: плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js : плагин Vue CLI для добавления Bootstrap 4 в ваш проект

Если вы хотите узнать больше о подключаемых модулях, ознакомьтесь с отличной статьей о Vue Mastery: 5 подключаемых модулей Vue CLI 3 для вашего проекта Vue.

А как насчет веб-пакета?

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

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

Создайте файл vue.config.js в корне вашего проекта, а затем выполните любую настройку в параметре configureWebpack:

Интерфейс интерфейса командной строки Vue

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

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

Вы создаете новый проект на вкладке Создать. Найдите место, где вы хотите создать свой проект, затем нажмите кнопку + Создать новый проект здесь.

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

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

Предустановка по умолчанию для предустановки по умолчанию с плагинами Babel и ESLint
Вручную для ручного выбора плагинов
Удаленная предустановка для использования удаленной предустановки из репозитория Git

Давайте продолжим с пресетом по умолчанию:

Совет. Набор настроек – это объединение подключаемых модулей и конфигураций.

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

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

Слева от панели инструментов вы можете найти разные страницы:

Плагины для добавления новых плагинов Vue CLI
Зависимости для управления пакетами
Configuration для настройки инструментов
Задачи для запуска скриптов

Перейдите на страницу Задачи.

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

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

Vue.js — это популярная библиотека JavaScript для создания пользовательских интерфейсов веб-приложений, а Visual Studio Code имеет встроенную поддержку стандартных блоков Vue.js для HTML, CSS и JavaScript. Для более богатой среды разработки Vue.js вы можете установить расширение Vetur, которое поддерживает Vue.js IntelliSense, фрагменты кода, форматирование и многое другое.

Добро пожаловать во Vue

Чтобы установить и использовать Vue CLI, а также запустить сервер приложений Vue, вам потребуется среда выполнения Node.js JavaScript и npm (менеджер пакетов Node.js). npm входит в состав Node.js, который можно установить из загрузки Node.js.

Совет. Чтобы проверить правильность установки Node.js и npm на вашем компьютере, введите node --version и npm --version .

Чтобы установить vue/cli , введите в терминале или командной строке:

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

где my-app — это имя папки для вашего приложения. Вам будет предложено выбрать пресет, и вы можете оставить значение по умолчанию (babel, eslint), которое будет использовать Babel для транспиляции JavaScript в совместимый с браузером ES5 и установить линтер ESLint для обнаружения ошибок кодирования. Создание приложения Vue и установка его зависимостей может занять несколько минут.

Давайте быстро запустим наше приложение Vue, перейдя в новую папку и набрав npm run serve, чтобы запустить веб-сервер и открыть приложение в браузере:

Чтобы открыть приложение Vue в VS Code, из терминала (или командной строки) перейдите в папку my-app и введите code . :

VS Code запустит и отобразит ваше приложение Vue в проводнике.

Расширение Vetur

Теперь разверните папку src и выберите файл App.vue. Вы заметите, что VS Code не отображает подсветку синтаксиса и обрабатывает файл как обычный текст, как вы можете видеть в нижней правой строке состояния. Вы также увидите уведомление с рекомендацией расширения Vetur для типа файлов .vue.

Расширение Vetur предоставляет возможности языка Vue.js (подсветка синтаксиса, IntelliSense, фрагменты кода, форматирование) для VS Code.

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

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

IntelliSense

Когда вы начнете вводить в App.vue , вы увидите умные предложения или дополнения как для HTML, так и для CSS, а также для определенных элементов Vue.js, таких как объявления ( v-bind , v-for ) в разделе шаблона Vue:

и свойства Vue (методы, вычисляемые) в разделе скриптов:

Перейти к определению, посмотреть определение

VS Code через языковую службу расширения Vue также может предоставить информацию об определении типа в редакторе с помощью команды «Перейти к определению» (F12) или «Просмотреть определение» (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)). Наведите курсор на приложение, щелкните правой кнопкой мыши и выберите Peek Definition. Откроется окно Peek с определением приложения из App.js .

Нажмите Escape, чтобы закрыть окно Peek.

Привет, мир!

Давайте обновим пример приложения до "Hello World!". В App.vue замените текст пользовательского атрибута msg компонента HelloWorld на «Hello World!».

После того как вы сохраните файл App.vue ( ⌘S (Windows, Linux Ctrl+S ) ), перезапустите сервер с помощью npm run serve, и вы увидите «Hello World!». Оставьте сервер включенным, пока мы продолжим изучение отладки на стороне клиента Vue.js.

Совет. VS Code поддерживает функцию автоматического сохранения, которая по умолчанию сохраняет ваши файлы с задержкой. Установите флажок «Автосохранение» в меню «Файл», чтобы включить автосохранение, или напрямую настройте пользовательский параметр files.autoSave.

Линтинг

Линтеры анализируют ваш исходный код и могут предупредить вас о потенциальных проблемах перед запуском приложения. Плагин Vue ESLint (eslint-plugin-vue) проверяет наличие специфических синтаксических ошибок Vue.js, которые отображаются в редакторе в виде красных волнистых линий, а также отображаются на панели «Проблемы» («Просмотр» > «Проблемы» ⇧⌘M (Windows, Linux Ctrl+Shift). +М ) ).

Ниже вы можете увидеть ошибку, когда Vue linter обнаруживает более одного корневого элемента в шаблоне:

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

Текущая версия Vuetify не поддерживает Vue 3.Поддержка Vue 3 появится с выпуском Vuetify v3

<р>. При создании нового проекта убедитесь, что вы выбрали Vue 2 в подсказках Vue CLI или выполняете установку в существующий проект Vue 2.

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

Если вы еще не создали новый проект Vue.js с помощью Vue CLI, вы можете сделать это, набрав:

Теперь, когда у вас есть экземпляр проекта, вы можете добавить пакет Vuetify Vue CLI

Эта команда внесет изменения в файлы шаблона вашего проекта, папку компонентов, vue.config.js и т. д. Если вы устанавливаете Vuetify через Vue-CLI, убедитесь, что вы зафиксировали свой код, чтобы избежать потенциальной потери данных. Изменения шаблона можно пропустить, выбрав во время установки параметр расширенной установки.

Vuetify также можно установить с помощью Vue UI, нового визуального приложения для Vue CLI. Убедитесь, что у вас установлена последняя версия Vue CLI, а затем тип вашего терминала:

Это запустит пользовательский интерфейс Vue и откроет новое окно в вашем браузере. В левой части экрана нажмите «Плагины». Оказавшись там, найдите Vuetify в поле ввода и установите плагин.

Vuetify можно добавить, установив модуль Nuxt Vuetify.

После установки обновите файл nuxt.config.js, чтобы включить модуль Vuetify в сборку.

Чтобы установить Vuetify в проект Webpack, вам нужно добавить несколько зависимостей:

После установки найдите файл webpack.config.js и скопируйте приведенный ниже фрагмент в массив правил. Если у вас настроено существующее правило sass, вам может потребоваться применить некоторые или все изменения, указанные ниже. Если вы хотите использовать vuetify-loader для встряхивания деревьев, убедитесь, что вы используете версию >=4 Webpack. Дополнительную информацию о настройке с помощью веб-пакета можно найти на странице Treeshaking

Создайте файл плагина для Vuetify, src/plugins/vuetify.js со следующим содержимым:

При использовании vuetify-loader используйте содержимое ниже:

Перейдите к основной точке входа, где вы создаете экземпляр Vue и передаете объект Vuetify в качестве опции.

Vuetify использует шрифт Google Roboto и значки Material Design. Самый простой способ установить их — включить их CDN в основной файл index.html.

Чтобы протестировать использование Vuetify без установки шаблона из Vue CLI, скопируйте приведенный ниже код в файл index.html. Это загрузит последнюю версию Vue и Vuetify, что позволит вам начать играть с компонентами. Вы также можете использовать стартовую версию Vuetify

на Codepen. Хотя это и не рекомендуется, но если вам нужно использовать пакеты CDN в производственной среде, рекомендуется ограничить версии ваших активов. Для получения дополнительной информации о том, как это сделать, перейдите на веб-сайт jsdelivr.

Чтобы ваше приложение работало должным образом, вы должны обернуть его компонентом v-app. Дополнительную информацию см. на странице компонента приложения.

Чтобы использовать Vuetify с Electron, добавьте плагин для создания электронов через Vue CLI.

Если вы создаете новое приложение с помощью Vue CLI, у вас есть возможность выбрать поддержку Progressive Web App (PWA) в первом запросе после запуска vue create my-app. Этот пакет также можно установить в существующие проекты Vue CLI, введя следующую команду:

Чтобы использовать Vuetify с Cordova, добавьте подключаемый модуль Cordova через Vue CLI:

Чтобы использовать Vuetify с конденсатором, добавьте конденсатор

плагин через Vue CLI:

Есть 2 способа использования Vuetify с темой vuepress по умолчанию. Либо зарегистрировав vuetify как плагин в vuepress

.vuepress/enhanceApp.js (пример кода ниже) или с помощью vuetify непосредственно из CDN:

Три ветки разработки ( master , dev и next ) автоматически публикуются в NPM в 12:00 UTC под @vuetify/nightly

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

Как и раньше, создайте файл index.html в папке проекта и добавьте следующий тег вверху.

3. Использование командной строки Vue.js
Этот вариант следует выбирать при разработке реального приложения, поскольку он создаст полную структуру проекта с множеством папок и файлов.
Если вы только начинаете и не знакомы с другими фреймворками, такими как angular или react, используйте первый подход. Как только вы освоитесь с Vue, настройте правильный проект, используя Vue CLI (интерфейс командной строки).
Для установки Vue.js с помощью этого подхода в вашей системе должен быть установлен Node.js. Node.js предоставляет среду выполнения для приложений javascript в виде сервера.
Установка Node.js
Для установки Node.js перейдите на страницу загрузок, загрузите последнюю стабильную версию для своей операционной системы и установите ее. Если вы устанавливаете Node.js, вместе с ним устанавливается и npm.После установки откройте командную строку и введите

node -v : если узел успешно установлен, будет напечатана версия установленного узла.
npm -v : если npm успешно установлен, будет напечатана установленная версия npm.

Node.js автоматически устанавливает npm, что означает Node Package Manager — менеджер пакетов для приложений javascript. Это упрощает установку пакетов, необходимых приложению, через клиент командной строки.
Пакет можно рассматривать как библиотеку. Если вы работаете с Java, рассмотрите пакет как банку. Если вы знаете имя пакета, вы можете загрузить его с помощью команды npm install package-name

После установки Node.js вы можете легко установить Vue.js CLI с помощью npm, используя приведенную ниже командную строку

npm install – глобальный vue-cli

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

vue init webpack-simple vueapp

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

F:\>vue init webpack-simple vueapp

<р>? Название проекта vueapp
? Описание проекта Проект Vue.js
? Автор Кодиппа
? Лицензия MIT
? Использовать сасс? Да

vue-cli · Сгенерировано «vueapp».

cd vueapp
npm install
npm run dev

После создания проекта перейдите в папку проекта с помощью cd vueapp и запустите команду

как показано на изображении выше.
Это установит все библиотеки, связанные с vue, в указанную папку.

F:\vueapp>npm install > node-sass@4.12.0 install F:\vueapp\node_modules\node-sass
> node scripts/install.js
….
….
добавлено 847 пакетов от 625 участников и проверено 10 418 пакетов за 96 218 сек.

Наконец выполнить команду

F:\vueapp>npm run dev

> vueapp@1.0.0 dev F:\vueapp
> cross-env NODE_ENV=development webpack-dev-server –open –hot

Это запустит сервер, прослушивающий порт 8080, а также запустит браузер по умолчанию с загруженной страницей, как показано ниже.

Содержимое папки проекта, сгенерированного vue CLI, будет.

Весь код приложения должен быть написан внутри папки src. Как видно из содержимого папки, это очень сложная структура по сравнению с первым подходом.
Преимущество этого подхода заключается в том, что если вы внесете какие-либо изменения и сохраните, страница браузера будет автоматически обновлена, в то время как при первом и втором подходах вам нужно обновить вручную, чтобы подтвердить изменения.
Если вы видите ту же страницу в браузере и то же содержимое папки, значит, вы успешно настроили Vue.js в своем приложении с помощью этого метода.
Открытие проекта в редакторе кода
Последний шаг — открыть редактор кода (VS Code), который мы настроили на первом этапе, с загруженным содержимым проекта. Выполните следующие шаги, чтобы открыть VS Code с загруженным в него содержимым проекта.

Открыть командную строку в Windows или терминал в системах Mac и Linux
Перейдите к месту, где вы создали проект (вручную или с помощью Vue CLI)
Введите код . (точка пробела кода) и нажмите Enter.

Это запустит VS Code с загруженным содержимым проекта, как показано ниже. Изображения, показанные ниже, относятся к каждому из методов, описанных выше, в том же порядке.

Vue.js загружены и добавлены вручную Vue.js загружены из CDN Создано vue CLI

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