VueJS — это потрясающая среда Javascript, используемая во всем мире для создания пользовательских интерфейсов. Независимо от того, являетесь ли вы новичком в веб-разработке или опытным ветераном, вы можете найти способ настроить его, который подходит именно вам. Ниже я перечислил четыре различных метода настройки для начала работы с VueJS, чтобы вы могли начать учиться и экспериментировать.

(1) Добавление библиотеки Vue с помощью тегов <script> без этапа сборки. Мое знакомство с Vue состоялось более года назад, когда я обнаружил, как добавлять кодовую базу так же, как я добавлял бы любую другую библиотеку JS — просто добавив ссылку на библиотеку в теги <script> внизу моих html-страниц.

Я постоянно использовал этот метод интеграции VueJS в своем курсе на JS Fiddle — вот краткий пример Hello World в Fiddle, и, конечно же, вы также можете попробовать его в песочнице CodePen.

Что касается доступа к библиотеке VueJS, вы можете загрузить ее напрямую или использовать CDN (вот Vue 2.3.4 на CloudFlare).

Этот метод эквивалентен тому, как вы добавляете jQuery или какую-либо другую библиотеку JS. Чтобы узнать больше, ознакомьтесь с статьей Сары Драснер Замена jQuery на Vue.js: шаг сборки не требуется.

(2) Запуск локального сервера с помощью инструмента Vue CLI. Вы можете загрузить и настроить инструмент интерфейса командной строки (CLI) на cli.vuejs.org и полностью создать проект из командная строка. Для начала вам понадобятся Node JS и npm, и я также рекомендую ознакомиться с потрясающей книгой Дэниела Кука Getting Started: Vue.js and Visual Studio Code, которую можно адаптировать к другим интегрированным средам разработки (IDE) или текстовым редакторам, таким как Возвышенный текст.

(3) Использование инструмента с графическим интерфейсом после его запуска из командной строки. После загрузки интерфейса командной строки вы также можете использовать графический пользовательский интерфейс (GUI) Vue для создания и настройки проекта, введя vue ui из командную строку — и, как и в случае с методом CLI, вы можете редактировать свой код с помощью своего любимого текстового редактора или IDE и просматривать результаты в браузере. Только в августе вышел Vue 3 CLI, который имеет очень интуитивно понятный экран и отличный набор параметров для начала работы. Чтобы изучить этот метод, я следовал второй половине Vue CLI 3 Tutorial: How to create Vue project, которая мне подошла.

(4) Запуск из командной строки с помощью веб-пакета. Вы также можете создать приложение Vue с помощью утилиты, известной как веб-пакет. Для начала ознакомьтесь с Vue.js и Webpack 4 с нуля, часть 1 Дэниела Кука.

Идти дальше

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

Пройти вводный курс

Vue иногда может показаться новым языком, и может быть сложно набрать темп обучения без структурированного пути обучения. За последние пару месяцев я прошел отличный курс Udemy под названием VueJS 2 — Полное руководство с Максимилианом Шварцмюллером. Курс начинается с подхода JS Fiddle, так что вводный курс прост. Если вы новичок в Vue и хотите научиться использовать его в своих проектах, я рекомендую пройти такой курс.

Изучите модель компонентов

Вы можете собрать приложение Vue, используя компоненты, которые находятся в файлах .vue. Каждый компонент состоит из собственной разметки шаблона, кода CSS и JS. Если вы уже распределяете свои стили CSS и код JS по нескольким файлам, эта модель может оказаться полезной для изучения.

Попробуйте создать многостраничные приложения

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

Удачи в начале работы с Vue!