Что такое cli vue - шпаргалка по для новичка

Разделение кода на основе маршрутов с помощью vue-router

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

Как и все остальное в Vue.js — это чрезвычайно просто. Вместо того, чтобы импортировать компоненты непосредственно в объекты маршрута, нам просто нужно передать туда динамическую функцию импорта. Компонент маршрута будет загружен ТОЛЬКО после задействование данного маршрута.

Таким образом, вместо обычного статического импорта компонента маршрута:

import RouteComponent form './RouteComponent.vue'

const routes = [{ path: /foo', component: RouteComponent }]

Нам нужно импортировать его динамически, что создаст новый пакет с этим маршрутом в качестве точки входа:

const routes = [
  { path: /foo', component: () => import('./RouteComponent.vue') }
]

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

С помощью этой настройки webpack создаст три пакета:

—наш основной пакет с точкой входа приложения (main.js) и библиотеками/компонентами, необходимыми для каждого маршрута
— комплект с домашней страницей, которая будет загружаться только при использование маршрута
— пакет с информацией о странице (и ее зависимостью — lodash), которая будет загружена только при использование маршрута /about.

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

6. Проверьте свой Props на правильное определение.

Это, пожалуй, самая важная лучшая практика, которой следует следовать.

Почему это важно?

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

И если вы в большой команде разработчиков, ваши коллеги не читают мысли, так что объясните им, как использовать ваши компоненты.

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

Посмотрите на этот пример из документов Vue.

История

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

React — JavaScript-библиотека с открытым исходным кодом, созданная Джорданом Валке из Facebook. Перед компанией стояла задача улучшить процессы создания и рендеринга интерфейсов, ведь Facebook необходимо было разрабатывать и поддерживать. Уже на тот момент это был огромный проект, а существующих технологий не хватало. Впервые React использовался в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012-ом. Но лишь в 2013 году сообществу разработчиков на конференции JSConf US был представлен исходный код. Прошло уже много времени, вышли сотни апдейтов, фиксов и дополнений функционала, но с тех самых пор React остается самым популярным среди 3 гигантов.

На сегодня версия 16.14.0 от 14 октября 2020 года является самой актуальной. За счет своей популярности и удобства многие крупные компании используют эту библиотеку для разработки своих продуктов. Среди них Facebook, Netflix, Yandex и многие другие.

Vue.js — JavaScript-фреймворк, созданный в 2014 году Эваном Ю, бывшим сотрудником Google, хотя разработку он начинал еще в стенах компании. Факт того, что полноценный фреймворк был создан одним программистом, — одно из главных отличий Vue, ведь за остальными стоят технические гиганты. На начальном этапе Эван полностью занимался написанием кода, обновлением документации, исправлением багов и продвижением своего детища.

С момента появления Vue прошло 6 лет, и уже сейчас он сравнялся по популярности с Angular от такого гиганта, как Google. Самый свежий релиз Vue 2.6.11 был представлен 13 декабря 2019 года. Но 18 сентября 2020 года была показана версия 3.0, которая уже в скором времени станет основной. Смешение возможностей других успешных JavaScript-фреймворков, одна из лучших документаций (лучшая на китайском) и легкость начала работы делает его таким популярным. Среди крупных компаний, которые пользуются всеми преимуществами Vue, отмечу Zoom, GitLab, Behance, Font Awesome.

Creating a Vue Project

After installing Vue CLI, let’s now look at how we can use it to quickly scaffold complete Vue projects with a modern front-end toolset.

Using Vue CLI, you can create or generate a new Vue app by running the following command in your terminal:

Tip: is the name of the project. You can obviously choose any valid name for your project.

The CLI will prompt you for the preset you want to use for your project. One option is to select the default preset which installs two plugins: Babel for transpiling modern JavaScript, and ESLint for ensuring code quality. Or you can manually select the features needed for your project from a set of official plugins. These include:

Babel
TypeScript
Progressive Web App support
Vue Router
Vuex (Vue’s official state management library)
CSS Pre-processors (PostCSS, CSS modules, Sass, Less & Stylus)
Linter/ Formatter using ESLint and Prettier
Unit Testing using Mocha or Jest
E2E Testing using Cypress or Nightwatch

Whatever you choose, the CLI will download the appropriate libraries and configure the project to use them. And if you choose to manually select features, at the end of the prompts you’ll also have the option to save your selections as a preset so that you can reuse it in future projects.

Now let’s look at the other scripts for serving the project (using a webpack development server and hot module reloading) and building the project for production.

Navigate inside your project’s folder:

Next, run the following command to serve your project locally:

The command will allow you to run a local development server from the http://localhost:8080 address. If you use your web browser to navigate to this address, you should see the following page:

The development server supports features like hot code reloading, which means you don’t need to stop and start your server every time you make any changes to your project’s source code. It will even preserve the state of your app!

And when you’ve finished developing your project, you can use the following command to build a production bundle:

This will output everything to a folder within your project. You can read more about deployment here.

What is the Vue CLI Service?

The Vue CLI Service is a run-time dependency () that abstracts webpack and provides default configurations. It can be upgraded, configured and extended with plugins.

It provides multiple scripts for working with Vue projects, such as the , and scripts.

We’ve seen the and scripts in action already. The script allows you to inspect the webpack config in a project with . Try it out:

As you can see, that produces a lot of output. Later on we’ll see how to tweak the webpack config in a Vue CLI project.

The Project Anatomy

A Vue project generated with the CLI has a predefined structure that adheres to best practices. If you choose to install any extra plugins (such as the Vue router), the CLI will also create the files necessary to use and configure these libraries.

Let’s take a look at the important files and folders in a Vue project when using the default preset.

. This folder contains public files like and . Any static assets placed here will simply be copied and not go through webpack.
. This folder contains the source files for your project. Most work will be done here.
. This folder contains the project’s assets such as .
. This folder contains the Vue components.
. This is the main Vue component of the project.
. This is the main project file which bootstraps the Vue application.
. This is a configuration file for Babel.
. This file contains a list of the project’s dependencies, as well as the configuration options for ESLint, PostCSS and supported browsers.
. This folder contains the installed npm packages.

This is a screenshot of the project’s anatomy:

Добавление плагинов

Если необходимо установить дополнительные Vue-плагины после создания проекта, то это легко сделать в данном окне. Для этого нажмите кнопку «Добавить плагин» («Add Plugin»), чтобы начать поиск («Search») того плагина, который вам необходим:

Поиск плагинов

Обратите внимание, что некоторые плагины обозначены как «Официальный» («Official»). Это означает, что данные плагины или непосредственно разрабатываются основной командой Vue.js или официально одобрены этой командой

Выберите интересующий вас плагин и нажмите кнопку «Установить» («Install»):

Установка плагина vue-i18n

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

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

После завершении установки выбранных плагинов будет показано окно «Изменения файлов» («Files changed»), в котором можно выполнить сохранение внесенных в проект изменений при помощи системы контроля версий Git:

Сохранение в системе Git

В обновленном окне «Плагины проекта» («Project plugins») в списке замечаем добавленный плагин наряду с плагинами, установленными во время первоначального создания проекта:

Плагин vue-i18n доступен на панели

5. Не используйте v-if в сочетании с v-for элементом.

Очень заманчиво хотеть использовать с для фильтрации элементов массива.

Проблема в том, что в Vue.js приоритет отдается директиве , а не директиве . Таким образом, под капотом она проходит через каждый элемент и then проверяет условие .

Это означает, что даже если мы хотим отрисовать только несколько элементов из списка, нам придется проциклировать весь массив.

Это нехорошо.

Более разумным решением было бы проведение итераций по вычисленному свойству. Приведенный выше пример выглядел бы примерно так.

Это хорошо по нескольким причинам.

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

Vue CLI Plugins

Vue CLI v3 is designed with a plugin architecture in mind. In this section, we’ll look at what plugins are and how to install them in your projects. We’ll also look at some popular plugins that can help add advanced features by automatically installing the required libraries and making various settings—all of which would otherwise have to be done manually.

What a Vue Plugin Is

CLI Plugins are just npm packages that provide additional features to your Vue project. The binary automatically resolves and loads all plugins listed in the file.

The base configuration for a Vue CLI 3 project is webpack and Babel. All the other features can be added via plugins.

There are official plugins provided by the Vue team and community plugins developed by the community. Official plugin names start with , and community plugin names start with .

Official Vue CLI 3 plugins include:

Typescript
PWA
Vuex
Vue Router
ESLint
Unit testing etc.

How to Add a Vue Plugin

Plugins are either automatically installed when creating the project or explicitly installed later by the developer.

You can install many built-in plugins in a project when initializing your project, and install any other additional plugins in the project using the command at any point of your project.

You can also install plugins with presets, and group your favorite plugins as reusable presets that you can use later as the base for other projects.

Some Useful Vue Plugins

There are many Vue CLI plugins that you might find useful for your next projects. For example, the Vuetify UI library is available as a plugin, as is Storybook. You can also use the Electron Builder plugin to quickly scaffold out a Vue project based on Electron.

I’ve also written a couple of plugins which you can make use of:

vue-cli-plugin-nuxt: a Vue CLI plugin for quickly creating a universal Vue application with Nuxt.js
vue-cli-plugin-bootstrap: a Vue CLI plugin for adding Bootstrap 4 to your project

If you’d like to find out more about plugins, check out this great article on Vue Mastery: 5 Vue CLI 3 plugins for your Vue project.

Как передавать прослушиватели событий?

React:

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

Здесь все очень просто. Аналогично бы мы поступили со встроенным onClick в Vanilla JS. Как упоминалось ранее в разделе Vue, понадобилось немного больше времени, чтобы прописать слушатель событий, который бы реагировал каждый раз, когда нажимается кнопка ввода. Для этого нужно событие onKeyPress, которым займется тэг input:

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

Vue:

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

Важно: @click — короткий вариант записи v-on:click. Самое крутое в прослушивателях событий в Vue — то, что к ним можно добавить кучу разных вещей, например, .once (тогда слушатель событий должен сработать не более одного раза)

Есть также несколько сокращений для написания слушателей событий, которые следят за нажатиями на клавиши. Я узнал, что на создание прослушивателя, который создает новые пункты списка, когда нажимается кнопка ввода, в React уходит больше времени, чем в Vue. Здесь нужно просто написать:

Vue CLI v3 Installation and Requirements

In this section, we’ll look at the requirements needed for Vue CLI v3 and how to install it.

Requirements

Let’s start with the requirements. Vue CLI v3 requires Node.js 8.9+, but v8.11.0+ is recommended.

You can install the latest version of Node.js in various ways:

By downloading the binaries for your system from the official website.
By using the official package manager for your system.
Using a version manager. This is probably the easiest way, as it allows you to manage multiple versions of Node on the same machine. If you’d like to find out more about this approach, please see our quick tip Installing Multiple Versions of Node.js Using nvm.

Vue creator, Evan You, described version 3 of the CLI as a “completely different beast” from its predecessor. As such, it’s important to uninstall any previous version of the CLI (that is, 2.x.x) before preceding with this tutorial.

If the package is installed globally on your system, you can remove it by running the following command:

Installing Vue CLI v3

You can now install Vue CLI v3 by simply running the following command from your terminal:

Note: if you find yourself needing to add before your command in macOS or Debian-based systems, or to use an administrator CMD prompt in Windows in order to install packages globally, then you should fix your permissions. The npm site has a guide on how to do this, or just use a version manager and you avoid the problem completely.

After successfully installing the CLI, you’ll be able to access the executable in your terminal.

For example, you can list all the available commands by executing the command:

You can check the version you have installed by running:

Структура компонента

Обратите внимание на следующий компонент:

Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.

Шаблон — это видимое содержимое компонента
Скрипт — это логика компонента
Стили, как вы уже догадались, — это стили шаблона.

Шаблон

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

Сценарий

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

Стили

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

1. Всегда используйте :key внутри v-for

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

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

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

Обзор структуры проекта

После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:

Пояснение к наиболее важным файлам и папкам:

src — Исходный код нашего проекта:
- assets — Ресурсы модуля, которые будут обрабатываться с помощью Webpack
- components — здесь мы храним наши компоненты пользовательского интерфейса
- router — здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
- App.vue — это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
- main.js — файл точки входа, который будет монтироваться — наш основной компонент пользовательского интерфейса
assets — ресурсы, которые не будут обрабатываться с помощью Webpack
index.html — возможно, вы помните, что приложение SPA всегда перезаписывает содержимое одного файла, так что это тот самый файл. Это файл, который мы покажем нашим пользователям. После сборки проекта этот файл загрузит статические файлы, которые были связаны с Webpack.

Взглянем на файл :

Единственная важная вещь в этом файле — это тег с , который будет заменен нашим компонентом . В следующей строке мы можем заметить комментарий, в котором говорится: «созданные файлы будут автоматически встроены». Итак, наш js-файл, который идет в комплекте с , будет вставлен под с

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

Мы создаем экземпляр нового компонента Vue, который будет монтировать наш компонент внутри div с атрибутом — вы помните с в index.html? Наконец, мы уведомляем наш компонент Vue об использовании маршрутизатора.

Зачем вам это?

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

Вам нужно по-настоящему нативное iOS или Android приложение: NativeScript строит ваши приложения, используя нативные компоненты пользовательского интерфейса iOS и Android. Приложения, которые вы создаете, не основываются на веб, и поэтому они лишены ограничений, которые присутствуют у фреймворков, основанных на WebView. NativeScript также предоставляет внушительную коллекцию плагинов, которые позволяют использовать различные нативные возможности устройств. Таким образом, если вам понадобится подключиться к API или возможности iOS или Android как части вашего приложения, вы сможете сделать это при помощи NativeScript.
Вам нравится JavaScript: С NativeScript вы пишите ваше мобильное приложение на JavaScript. Не на Objective-C, не на Swift, и не на Java. Если вам нравится JavaScript, то вы полюбите писать нативные приложения для iOS и Android с помощью того же языка, который вы используете для веб- и/или Node-приложений.
Вам нравится Vue: Vue известен простотой управления слоем отображения. Если вам нравится разрабатывать приложения с использованием Vue, вы будете в своей тарелке с NativeScript-Vue, так как вы будете использовать такой же синтаксис для решения обычных задач, таких как связывание данных или обработка событий.

Что такое Vue.js?

С добавлением фреймворков, JavaScript стал благом для современной массовой разработки приложений. Vue.js от французского «представление» — это бесплатная прогрессивная JS-платформа с открытым исходным кодом для создания адаптивных приложений с продвинутым пользовательским интерфейсом. Количество разработчиков, использующих его, растет с экспоненциальной скоростью. Если в 2017 году у Vue.js было около 36 000 звезд на Github, то к концу 2021 года их стало 192 000.

В отличие от других популярных проектов на базе JavaScript, Vue.js не поддерживается такими крупными корпорациями, как Facebook (воспевающий React) или Google (взявший шефство над Angular). Vue.js ведет сообщество независимых разработчиков, внося туда новые фичи и исправляя проблемные места.

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

Для работы с фреймворком необходимо:

Знание HTML и CSS.
Знание базового JavaScript.
Знакомство с функциями и синтаксисом ES6+.
Node.js и npm, установленные глобально.

Установка Vue CLI и запуск нового проекта

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

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

Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:

Через некоторое время мастер установки задаст нам несколько вопросов.

Подробности проекта

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

Второй вопрос: (Описание проекта). А для этого мы напишем Если хотите, можете написать что то свое.

Настройка Vue.js и ESLint

Четвертый вопрос: необходимо выбрать сборку Vue: или просто . Мы выберем, потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.

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

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

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

Настройка тестов и прочего.

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

Девятый вопрос касается тестов e2e, и мы снова напечатаем .

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

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

Подождем, пока он все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать — использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.

По состоянию на 21.10.2020
Технологии	LinkedIn	Indeed	Djinni	DOU
React
Vue.js

Что такое cli vue — гид по для новичка