Как установить vue js на ubuntu

Обновлено: 30.06.2024

Как и в случае с другими фреймворками, для всего множества полезных вещей, которые они могут использовать, мы должны сначала установить их или найти ссылку на их расположение в Интернете, эта статья проведет вас через процесс установки Vue.JS.

Примечание о совместимости

Из-за того, что Vue использует функции ES5 (ECMAScript 5), которые плохо работают с IE8 и ниже, Vue не поддерживает IE8. Тем не менее, вы можете запустить Vue в любом браузере, к которому относится жалоба ES5.

На момент написания этой статьи стабильной версией Vue является версия 2.6.10.

Vue Devtools

При программировании на JavaScript вы быстро столкнетесь с проблемами, если не сделаете консоль своим другом для отладки, также при работе с Vue рекомендуется установить Vue Devtools. Это позволяет нам эффективно отслеживать и отлаживать наши приложения. Гораздо больше, чем обычная консольная отладка.

Vue предоставляет три способа установки, а именно:

прямое <script> включение
НПМ
Vue Cli

прямое <script> включение

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

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

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

Однако, когда вы создаете производственное приложение, укажите ссылку на конкретный номер версии, например, так:

Или вы можете использовать синтаксис ES-модулей в том случае, если вы используете нативные ES-модули, как показано ниже:

Vue одинаково доступен на unpkg и cdnjs.

NPM

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

CLI

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

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

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

Runtime + Compiler vs Runtime-only

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

Всякий раз, когда мы используем vue-loader или vuetify, файлы * .vue содержат шаблоны, которые будут предварительно скомпилированы как JavaScript во время сборки.

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

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

Развитие против режима производства

Обычно не минимизированная форма vue предназначена для разработки, тогда как минимизированная форма предназначена для производственного приложения. Модули CommonJS и ES, однако, не входят в минимизированные версии, их нужно минимизировать самостоятельно.

сборки commons и ES Module помогают нам сохранить необработанные проверки для process.env.NODE_ENV, чтобы определить соответствующий режим, в котором они должны работать. Всегда используйте соответствующую конфигурацию пакета для замены переменных среды, чтобы управлять режимом, в котором должен работать Vue.

Когда мы заменим process.env.NODE_ENV на строковые литералы, минификаторы, такие как UglifyJS, будут полностью отбрасывать блоки кода, предназначенные только для разработки.

Webpack

С webpack 4+ можно использовать опцию режима:

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

Свернуть

Это достигается с помощью rollup-plugin-replace

Browserify

Просто примените envify transform к вашему пакету

Среда CSP

Существуют такие среды, как Google Chrome, которые применяют Политику безопасности контента (CSP), это предотвращает использование новой функции () в качестве оценщика выражений. Поскольку полная сборка зависит от новой функции, ее нельзя использовать в таких средах. Однако только сборки времени выполнения совместимы с CSP.

Dev Build

Вы можете использовать Vue из его последнего исходного кода на GitHub:

Беседка

Vue также можно установить с помощью Bower, используя команду bower install, как показано ниже

Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.

Установка Vue.js и использование vue-cli

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

Продолжим работу над проектом, создав папку application в его корневой директории. Этот шаг можно и пропустить, создав папку в процессе работы с vue-cli . Если вы решите не создавать папку, тогда вам нужно дать проекту имя, выполнив команду такого вида:

Вот как выглядит проект после создания папки application :

Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:

Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.

Теперь вызовем следующую команду:

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

После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:

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

Далее, всё ещё оставаясь в папке application , устанавливаем зависимости и запускаем проект.

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

Очистка приложения Vue

Уберём из приложения некоторые ненужные нам стандартные элементы. Для этого надо перейти в папку application/src/assets и удалить logo.jpg , так как этим файлом мы пользоваться не будем. Далее, откроем файл корневого компонента App.vue из папки application/src и приведём его к виду, представленному следующим фрагментом кода:

Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:

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

Теперь, на последнем этапе очистки стандартного приложения, удалим файл HelloWorld.vue из папки components .

Установка зависимостей

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

Теперь установим зависимости разработки:

Начало работы над фронтендом приложения

Теперь, когда все подготовительные мероприятия завершены, займёмся разработкой. Перейдём к папке components и создадим в ней папку pages , в которой создадим папку Authentication . В этой папке надо создать файл Authentication.vue , представляющий компонент, которым будем пользоваться для аутентификации. Вот что должно в итоге получиться:

В файле Authentication.vue разместим следующий код:

Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.

Для начала импортируем компонент Authentication и настроим маршрут для его использования:

Перейдём к компоненту App.vue из папки src и займёмся стилями. Сначала нужно подготовить тег style . Разместим его сразу после закрытия тега script :

Теперь переходим в папку src/assets и создаём в ней файл styles.scss и папку partials . В этой папке создадим два частичных шаблона, представленных файлами _variables.scss и _animations.scss . В результате должна получиться такая структура:

В файле _variables.scss зададим такие параметры:

В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft :

Импортируем частичные шаблоны в styles.scss :

Теперь, в папке assets , создадим папку images . Сюда можно поместить любое изображение, которое будет использоваться в качестве фона. Здесь, в репозитории, можно найти изображение, которое применяется в этом материале.

Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue :

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

В псевдоэлементе body :after мы задаём параметр background-color , записывая в него значение переменной $background-tint . Это позволит применить к фоновому изображению пурпурный цветной фильтр. Вот как выглядят разные варианты фонового изображения.

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

Масштабирование области просмотра и загрузка иконок

Благодаря этому шагу мы обеспечим правильное отображение приложения на мобильных устройствах. Кроме того, на данном этапе работы мы загрузим иконки в стиле Material Design. Для того, чтобы всё это сделать, перейдём к файлу index.html , который расположен в папке application и добавим следующее в тег head :

Разработка компонента Authentication

Теперь, когда мы немного украсили приложение, избавившись, по крайней мере, от скучных белых страниц, продолжим работу над компонентом Authentication . Создадим в папке Authentication файл index.js .

Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:

Теперь создадим объект Authentication , который будет содержать нужные нам методы:

Мы начинаем работу над этим компонентом, объявляя объект с именем user , который хранит сведения о том, аутентифицирован ли пользователь.

Теперь напишем методы:

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

Второй метод очень похож на первый, его мы используем для создания новой учётной записи. Разница между ним и первым методом заключается в конечной точке, с которой мы работаем.
Третий метод используется для проверки того, аутентифицирован пользователь или нет.
Последний метод позволяет возвратить заголовок Authorization .

Теперь продолжим работу над компонентом, открыв файл Authentication.vue . Тут мы будем пользоваться средствами Vuetify:

Здесь имеется элемент div с классом l-auth-container , который выполняет роль контейнера. Следом идёт ещё один div с классом l-auth , который содержит структуру элементов для организации формы ввода, в частности, это элемент v-form , привязанный к данным переменной validLogin .

Второе поле ввода предназначено для пароля, оно снабжено иконкой, которая указывает на то, может ли пользователь видеть вводимый пароль. У этой иконки есть коллбэк, являющийся стрелочной функцией, который позволяет переключать значение переменной loginPasswordVisible с true на false и наоборот. Если эта переменная установлена в true , то параметр type поля ввода устанавливается в text , иначе это password .

И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.

Следующий фрагмент кода описывает структуру формы регистрации в системе, которая видна лишь в том случае, если переменная signUpVisible установлена в true . Устройство этой формы похоже на устройство формы входа в систему, тут изменены лишь несколько строк. В частности, здесь используется переменная signUpPasswordVisible вместо loginPasswordVisible и другой метод обработки щелчка по кнопке.

Теперь, в том же файле Authentication.vue , опишем скрипт компонента:

Тут всё начинается с импорта файла index.js из папки Authentication , так как нам нужен метод authenticate , определённый внутри этого файла.

Взглянем теперь на переменные, хранящие данные компонента:

И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):

Вот как выглядят компоненты для входа в систему и регистрации нового пользователя.

Разработка компонента Home

Перейдём в папку pages и создадим файл компонента Home.vue :

Защита системы навигации

Откроем файл index.js из папки router . Вот к какому виду его нужно привести:

Рассмотрим этот код.

В этой строке мы импортируем файл Authentication , называя его Auth , так как компонент Authentication также был импортирован.

Тут мы даём имя объекту Router для того, чтобы позже создать защиту системы навигации. Также мы добавляем путь к компоненту Home . В параметре meta.requiredAuth будет записано true . Это означает, что если к этому компоненту попытается получить доступ неаутентифицированный пользователь, он будет перенаправлен на страницу входа в систему.

Здесь мы защищаем систему навигации. А именно, регистрируем глобальный сторожевой хук, пользуясь которым перед переходом по каждому маршруту проверяем, установлен ли его параметр meta.requiredAuth в true . Если это так, мы проверяем объект пользователя из Authentication . Если пользователь не аутентифицирован, мы перенаправляем его на страницу входа в систему.

Этой командой экспортируем маршрутизатор.

Теперь откройте файл main.js в папке application . Тут мы собираемся импортировать файл Authentication и вызвать метод checkAuthentication :

Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.

В этом руководстве описывается, как настроить среду разработки Vue.js в Windows 10 путем установки веб-платформы Vue.js в подсистеме Windows для Linux (WSL). Дополнительные сведения см. в статье Общие сведения о Vue.js.

Vue можно установить непосредственно в Windows или WSL. Обычно мы рекомендуем установку в WSL, если вы планируете взаимодействовать с серверной частью Node.js, хотите поэкспериментировать с рабочим сервером Linux или собираетесь выполнять команды Bash. Дополнительные сведения см. в статье Выбор между установкой в Windows и подсистеме Windows для Linux.

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

, включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v ; , включая диспетчер версий, диспетчер пакетов, Visual Studio Code и расширение для удаленной разработки. Для установки Vue.js используется npm.

При установке дистрибутива Linux в WSL будет создан каталог \\wsl\Ubuntu-20.04 для хранения файлов (замените Ubuntu-20.04 дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите домашний каталог с помощью команды cd

, а затем введите команду explorer.exe . . Не выполняйте установку и не настраивайте хранение файлов, с которыми вы будете работать, на подключенном диске C ( /mnt/c/Users/yourname$ ). Это существенно замедлит установку и сборку.

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

Чтобы установить Vue.js в WSL, сделайте следующее:

Откройте командную строку WSL (например, в Ubuntu).

Создайте новую папку проекта mkdir VueProjects и войдите в этот каталог: cd VueProjects .

Установите Vue.js с помощью npm:

Проверьте номер установленной версии с помощью команды vue --version .

Чтобы установить Vue.js с помощью CDN, а не npm, см. документацию по установке Vue.js.

Установка Vue CLI

Vue CLI — это набор средств для работы с Vue в окне терминала или командной строке. Они позволяют быстро сформировать шаблон нового проекта (vue create), создать прототип новых идей (vue serve) или управлять проектами с помощью графического пользовательского интерфейса (vue ui). Vue CLI — это глобально установленный пакет npm, который устраняет некоторые сложности при сборке (например, при использовании Babel или webpack). Если вы не создаете одностраничное приложение, вы можете не использовать Vue CLI.

Чтобы установить Vue CLI, используйте npm. Используйте флаг -g для глобальной установки и обновления ( vue upgrade --next ):

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

Для нового приложения Vue лучше использовать Vue CLI .

Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

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

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

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

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

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

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

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

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

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

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

После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду 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. Для этого перейдите в папку проекта:

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

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

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

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

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

Служба 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.

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

Плагины CLI Vue

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

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

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

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

Typescript;
PWA;
Vuex;
Vue Router;
ESLint;
Unit testing etc.

Как добавить плагин 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:

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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