Привет мир!

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

Vue — это фреймворк javascript для создания пользовательских интерфейсов. Он способен работать со сложными одностраничными приложениями (SPA). Это один из трех самых популярных современных фреймворков JavaScript, два других фреймворка — Angular и React.

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

Теперь давайте начнем с настройки нашего первого проекта Vue.

Окружающая обстановка

В других случаях, чтобы Vue (или любая другая среда Javascript) работала на вашем компьютере, вы должны сначала установить NodeJs и NPM,

NodeJS — это среда выполнения Javascript, способная запускать код Javascript вне браузера.

NPM, который является аббревиатурой от Node Package Manager, используется для установки и управления зависимостями, используемыми в проекте. Он будет установлен вместе с Node.

Чтобы установить Node локально, посетите официальный веб-сайт страница загрузок и выберите наиболее подходящую загрузку для ПК или Mac. Предпочтительно загружать LTS (долгосрочная поддержка), которая на данный момент является наиболее стабильной версией.

На момент написания этой статьи версия LTS была v12.13.0.

Установка довольно проста, примите все значения по умолчанию и нажмите «Готово/Готово» для завершения.

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

node -v

вы должны увидеть номер версии

12.13.0

также запустите это, чтобы проверить вашу версию npm

npm -v

результат должен быть

6.12.0

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

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

npm install -g @vue-cli

npm — наш менеджер пакетов, install — это действие в данном случае, -g — глобальный, это позволит нам получить доступ к vue-cli из любой папки на машине, @vue-cli — это имя того, что мы пытаемся установить.

Проверьте установку Vue, запустив

vue --version

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

Пришло время создать наш первый проект. Для этого выполните следующую команду vue create [project name] Например, давайте создадим проект с именем hello-world

vue create hello-world

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

Babel — это транспилятор JavaScript, который преобразует Edge JavaScript в простой старый JavaScript ES5, который может работать в любом браузере (даже в старом).

ESlint — это инструмент для выявления шаблонов, обнаруженных в коде ECMAScript/JavaScript, и создания отчетов о них с целью сделать код более согласованным и избежать ошибок.

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

Когда вся установка будет завершена, вы увидите это

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

cd hello-world 
npm run serve

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

Посетите адрес в своем браузере, например http:localhost:8081, и у вас должна быть официальная целевая страница Vue Js.

Поздравляем с созданием вашего первого приложения Vue! Теперь давайте посмотрим, из чего состоит наше приложение и откуда взялось все, что у нас есть на этой целевой странице.

-Структура проекта

Перейдите в папку проекта в проводнике и откройте в любом редакторе по вашему выбору. Я использую vs-code editor от Microsoft, установить можно здесь.

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

-Node_Modules

node_modules содержит ядро ​​Vue и другие зависимости. Когда мы устанавливаем/добавляем новые зависимости, файлы сохраняются в node_modules и доступны оттуда.

-Общедоступно

Папка public содержит единственный HTML-файл, в котором отображается наше приложение.

Скомпилированный код Javascript нацелен на ‹div› с идентификатором приложения и внедряет встроенные файлы в этот div. Точно так же, как обычный таргетинг ID-тегов, выполненный с использованием ванильного Javascript.

-package.json и другие файлы конфигурации

package.json содержат объект JSON, содержащий информацию о проекте, имя, версию, сценарии, используемые для запуска проекта, зависимости и другую информацию о конфигурации приложения.

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

README.md — это наш стандартный текстовый файл readme для передачи информации о проекте другим пользователям или соавторам.

babel.config.js содержит конфигурации Babel для проекта.

package-lock.json автоматически генерируется для любых операций, в которых npm изменяет либо дерево node_modules, либо package.json.

-источник

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

main.js — это точка входа в приложение Vue, именно здесь объявляется и настраивается корневой экземпляр Vue. Код в main.js выглядит так

В строке 1 выше мы импортируем Vue из пакета npm «vue», который находится в нашей папке node_modules/.

В строке 2 мы импортируем основной компонент Vue с именем App из ./App.vue.

В строке 6–8 мы монтируем наш компонент в #app — именно здесь мы объявляем ‹div id="app"› в нашем файле public/index.html в качестве цели рендеринга нашего приложения VueJS.

Теперь давайте взглянем на основной компонент Vue App.vue, который также находится в папке src. Vue использует модель Single File Component (SFC), в которой разметка, стиль и сценарий содержатся в одном файле с расширением .vue.

Вот как в этом случае выглядит наш App.vue SFC:

В теге script мы импортируем другой компонент HelloWorld из './components/HelloWorld.vue', после чего наш экземпляр Vue определяется в объекте export default. В этом экземпляре Vue мы должны зарегистрировать импортированный компонент, как показано здесь:

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

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

Если бы мы хотели добавить свойство text в наш компонент App.vue, мы бы сделали это, используя data как таковой.

export default {
  name: 'app',
  data: function () {
    return {
      text: "Vue is awesome" 
    }
  },
  components: {
    HelloWorld
  }
}

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

Чтобы отобразить содержимое text в шаблоне, добавьте тег абзаца в шаблон в App.vue:

<p>Text:  {{ text }} </p>

Теперь запустите приложение с помощью команды npm run serve в cli. Текст отображается в браузере.

– Передача данных в другой компонент.

Здесь появляется props, с реквизитами мы можем определить свойство в одном компоненте, а затем передать его другому компоненту. Давайте попробуем передать массив базовых веб-технологий от основного компонента App.vue дочернему компоненту HelloWorld.vue.

Теперь давайте определим другое свойство в данных

export default {
  name: 'app',
  data: function () {
    return {
      ...
      web: ['HTML', 'CSS', 'JS']
    }
  },
  components: {
    HelloWorld
  }
}

Новое свойство web представляет собой массив строк. И мы собираемся передать это компоненту HelloWorld, который мы уже зарегистрировали в компоненте приложения.

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

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

По-прежнему в разделе шаблонов компонента приложения измените тег ‹HelloWorld /›, чтобы он выглядел следующим образом.

<HelloWorld msg="Welcome to Your Vue.js App" v-bind:web="web"/>

Обратите внимание, что содержимое msg указывается при передаче его в качестве реквизита компоненту HelloWorld, в этом случае v-bind как таковой не требуется.

Шаблон и скрипт компонента приложения теперь должны выглядеть так:

Теперь, чтобы получить только что переданный реквизит в компоненте HelloWorld, откройте компонент и в разделе сценария укажите имя получаемого реквизита (имя после v-bind:), в данном случае web. Кроме того, Vue требует от нас указать тип данных Array. Раздел скрипта должен выглядеть так:

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    web: Array
  }
}
</script>

Теперь мы также можем получить доступ к реквизиту web в компоненте HelloWorld, чтобы отобразить его в виде списка в шаблоне, мы также используем другую директиву, называемую v-for. Директива v-for используется для перебора и отображения списка элементов на основе массива. Директива v-for требует специального синтаксиса в виде элемента в элементах, где элементы — это исходный массив данных, а элемент — псевдоним для итерируемого элемента массива, а затем мы можем использовать метод интерполяции для отображения каждого элемента.

Добавьте эту строку в любом месте шаблона вашего компонента HelloWorld.

<li v-for="item in web">{{item}}</li>

Теперь вы можете получить предупреждение в своем редакторе о том, что элементы в итерациях должны иметь директиву v-bind:key, это означает, что каждому элементу в списке требуется уникальный идентификатор, чтобы отслеживать их, поэтому мы добавим индекс и привяжем key к индексу. Измените строку, чтобы она выглядела следующим образом:

<li v-for="(item, index) in web" v-bind:key="index">{{item}}</li>

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

И это так, здорово!

На данный момент нам удалось:

  • настроить среду разработки для Vue.
  • создайте новый проект Vue.
  • запускаем наше приложение с помощью npm.
  • посмотрите на структуру проекта Vue и однофайлового компонента.
  • определить свойство в SFC.
  • передать свойство в качестве реквизита между двумя компонентами.

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

Ваше здоровье.