Skip to content

Начало работы

Добро пожаловать в учебник по Vue!

Цель этого руководства — дать быстрое представление каким образом можно работать с Vue в браузере. Оно не стремится быть всеобъемлющим, и вам не нужно понимать всё, прежде чем двигаться дальше. Но после его завершения рекомендуем прочитать Руководство, где рассматривается каждая тема подробно.

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

Этот учебник предполагает базовое знакомство с HTML, CSS и JavaScript. Если вы совсем новичок в разработке фронтенда, возможно, не стоит сразу бросаться на фреймворк в качестве первого шага - изучите основы, а затем возвращайтесь! Предварительный опыт работы с другими фреймворками поможет, но не обязателен.

Как использовать этот учебник

Вы можете редактировать код справа внизу и видеть, как результат мгновенно обновляется. На каждом шаге будет представлена одна из основных возможностей Vue, и от вас потребуется доработать код, чтобы демонстрация заработала. Если вы застрянете, у вас будет кнопка "Показать!", которая покажет вам рабочий код. Постарайтесь не слишком полагаться на нее - вы быстрее научитесь, если будете разбираться во всем самостоятельно.

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

Подробности настройки учебника
  • Vue предлагает два стиля API: Options API и Composition API. Справочник API разработан для работы с любым - вы можете выбрать предпочитаемый стиль, используя переключатели Предпочитаемый стиль API вверху. Узнайте больше о стилях API.

  • Вы также можете переключаться между SFC-режимом и HTML-режимом. В первом будут показаны примеры кода в формате Однофайловые компоненты (SFC), который используется большинством разработчиков при использовании Vue на этапе сборки. HTML-режим показывает использование без этапа сборки.

TIP

Если вы хотите использовать HTML-режим без этапа сборки внутри ваших приложений, убедитесь, что вы также поменяли импорты

js
import { ... } from 'vue/dist/vue.esm-bundler.js'

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

js
// vite.config.js
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}

Посмотрите соответствующий раздел в руководстве по инструментарию для большей информации.

Готовы? Нажмите "Далее", чтобы начать работу.

App.vue
Show Error
Auto Save
TutorialУже загружено