Vue-tiful Beginnings: руководство для начинающих по созданию и настройке вашего первого веб-приложения Vue.js

Vue-tiful Beginnings: руководство для начинающих по созданию и настройке вашего первого веб-приложения Vue.js была первоначально опубликована в понедельник, 09 января 2023 г., в блоге технических разработчиков. . Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!

Добро пожаловать в мир Vue.js! Если вы новичок в этой удивительной среде JavaScript, вас ждет угощение. С Vue.js вы можете легко и быстро создать и настроить собственное веб-приложение.

Начать

Прежде всего, давайте начнем с настройки вашего проекта Vue.js. На вашем компьютере должны быть установлены Node.js и npm (менеджер пакетов Node). Если у вас их еще нет, зайдите на сайт Node.js и загрузите последнюю версию.

После того, как вы установили Node.js и npm, откройте свой терминал и перейдите в каталог, в котором вы хотите создать свой проект. Затем выполните следующую команду, чтобы создать новый проект Vue.js:

vue create my-project

Это создаст новый проект Vue.js с именем my-project в текущем каталоге. Вам будет предложено несколько вариантов настройки вашего проекта. В этом руководстве мы будем придерживаться конфигурации по умолчанию. Просто нажмите Enter, чтобы выбрать параметр по умолчанию, и дайте проекту настроиться.

После того, как ваш проект настроен, вы должны увидеть новый каталог с именем «my-project» в вашем текущем каталоге. Перейдите в этот каталог, выполнив:

cd my-project

Создать веб-приложение

Теперь пришло время приступить к созданию вашего веб-приложения! В вашем каталоге my-project вы увидите файл с именем main.js. Это точка входа для вашего приложения Vue.js, и именно здесь мы будем выполнять большую часть нашей работы.

Откройте «main.js» в своем любимом текстовом редакторе, и вы увидите уже готовый шаблонный код. Это включает в себя оператор импорта для библиотеки Vue и новый экземпляр Vue.

Чтобы создать свой первый компонент Vue.js, вам нужно определить новый объект Vue с шаблоном и объектом данных. Шаблон — это структура HTML для вашего компонента, а объект данных содержит данные, которые вы хотите отобразить в своем компоненте.

Например, давайте создадим простой компонент, который отображает приветственное сообщение. Добавьте следующий код в файл «main.js»:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  },
  template: `
    <div>{{ message }}</div>
  `
});

Это создает новый экземпляр Vue со свойством данных сообщения и шаблоном, который отображает сообщение. Свойство el указывает элемент в вашем HTML-файле, в котором будет отображаться компонент. В этом случае он будет отображаться в элементе с идентификатором app.

Теперь давайте создадим файл HTML для отображения нашего компонента Vue.js. В вашем каталоге «my-project» создайте новый файл с именем «index.html» и добавьте следующий код:

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue.js App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

Этот файл HTML создает элемент div с идентификатором app, в котором будет отображаться наш компонент Vue.js. Он также включает тег скрипта, который загружает наш файл main.js, содержащий наш компонент Vue.js.

Обслуживание приложения Vue.js локально

Теперь, когда у нас настроены файлы HTML и Vue.js, давайте запустим наше приложение и посмотрим наше приветственное сообщение в действии! В терминале выполните следующую команду:

npm run serve

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

Настройте свое приложение

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

Начнем с добавления директивы в наш шаблон. Директивы — это специальные атрибуты, которые начинаются с префикса v- и позволяют привязывать данные к вашему шаблону. Например, директива v-bind позволяет привязывать данные к атрибутам элемента.

Давайте используем директиву v-bind для привязки данных нашего сообщения к тексту элемента кнопки. Обновите свой шаблон до следующего:

template: `
  <div>
    <button v-bind:text="message">Click me</button>
  </div>
`

Теперь, когда вы обновите свое приложение, вы должны увидеть кнопку с текстом «Hello, world!» отображается на нем. Всякий раз, когда вы обновляете свойство данных сообщения, текст кнопки также будет автоматически обновляться.

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

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

computed: {
  capitalisedMessage: function() {
    return this.message.toUpperCase();
  }
}

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

template: `
  <div>
    <button v-bind:text="capitalisedMessage">Click me</button>
  </div>
`

Обновите приложение, и вы увидите, что текст кнопки изменится на «HELLO, WORLD!».

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

Например, давайте добавим метод, который переключает приветственное сообщение между «Hello, world!» и «Прощай, мир!». Добавьте следующий код в свой экземпляр Vue:

methods: {
  toggleMessage: function() {
    if (this.message === 'Hello, world!') {
      this.message = 'Goodbye, world!';
    } else {
      this.message = 'Hello, world!';
    }
  }
}

Теперь вы можете использовать метод toggleMessage в своем шаблоне, добавив директиву v-on к элементу кнопки. Директива v-on позволяет привязать метод к событию элемента, например к событию щелчка. Обновите свой шаблон до следующего:

template: `
  <div>
  <button v-bind:text="capitalisedMessage" v-on:click="toggleMessage">Click me</button>

  </div>
`

Обновите приложение и попробуйте нажать кнопку. Вы должны увидеть, как приветственное сообщение переключается между «Hello, world!» и «Прощай, мир!».

Заключение

И вот оно! Вы только что узнали, как создать и настроить свое первое веб-приложение Vue.js. С Vue.js легко создавать динамические интерактивные компоненты, которые оживляют ваше веб-приложение. Так что вперед, поэкспериментируйте с Vue.js — возможности безграничны!