Создавать приложения с помощью Vue.js легко, весело и весело. Но мы устали строить просто некрасивый проект; пришло время сделать шаг вперед и посмотреть, как мы можем использовать стили Bootstrap и файлы JavaScript для стилизации интерфейса приложения Vue.js.
Что касается Vue, мы будем создавать простое клиентское приложение для создания и перечисления авторов. У каждого автора будет идентификатор, имя, адрес электронной почты и описание, и мы будем использовать Vuex Store, чтобы снабжать нас некоторыми демонстрационными данными, а также сохранять их.
Что касается пользовательского интерфейса, мы увидим, как вы можете использовать элементы управления Bootstrap, классы и стиль таблиц… для создания красивых форм и HTML-таблиц.
Как всегда, в любом создаваемом мной уроке я пытаюсь разбить лед на мелкие кусочки. Так что вы можете рассчитывать на то, что все разберетесь в деталях.
Примечание. Вы можете найти полный исходный код в следующем репозитории GitHub. А вот живая ссылка на то, что вы будете строить.
Предварительно требования
Чтобы следовать этому руководству, на вашем компьютере должен быть установлен Node.js. Вам также понадобится любой из менеджеров пакетов, NPM (установка Node.js также устанавливает NPM), или вы можете, например, использовать Yarn.
Также требуются базовые знания JavaScript и Vue.js. Так что, если вы хотите ускориться, убедитесь, что вы следуете официальной документации здесь.
Настроить проект
Для начала нам нужно создать новый проект Vue.js, и для этого мы будем использовать Vue CLI, который является отличным инструментом для начальной загрузки приложений Vue. Итак, в вашем терминале выполните следующую команду:
npm install –g vue-cli
Затем инициализируйте новый рабочий проект, выполнив следующую команду:
vue create vue-bootstrap-demo
Примечание. После того, как вы введете указанную выше команду, вам будут предложены два варианта: выберите «Выбрать функции вручную». После этого оставьте выбранные значения по умолчанию, но убедитесь, что вы также выбрали «Маршрутизатор» и «Vuex». Они необходимы для этого руководства.
После того, как проект настроен и все начальные зависимости устранены, перейдите к вновь созданному проекту и запустите приложение с помощью NPM:
cd vue-bootstrap-demo npm run serve
Это запустит сервер разработки с активной перезагрузкой по адресу http: // localhost: 8080. Откройте браузер по умолчанию и перейдите по этому адресу. Вы должны увидеть следующий стартовый шаблон Vue:
Установка и импорт Bootstrap
После формирования проекта следующим шагом будет установка Bootstrap 4 и его интеграция в приложение Vue, которое мы только что создали.
Сначала убедитесь, что вы находитесь в корневом каталоге проекта, а затем установите Bootstrap 4, Jquery и Popper.js с помощью пакета NPM:
npm install bootstrap jquery popper.js --save
