Как запустить vue js приложение

Обновлено: 07.01.2025

Для нового приложения Vue лучше использовать Vue CLI .

Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

Vue CLI – это система для быстрой разработки и создания прототипов Vue.js. Она состоит из различных компонентов: служба CLI , плагины CLI . В последней версии утилиты в ней появился графический интерфейс для управления проектом.

Установка и системные требования Vue CLI 3

Системные требования

Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.

Ее можно установить:

Загрузив двоичные файлы для вашей операционной системы с официального сайта проекта.
Используя официальный менеджер пакетов.
С помощью менеджера версий.

Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:

Установка CLI Vue 3

Чтобы установить Vue CLI v3, запустите следующую команду:

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

После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:

А также проверить установленную версию, выполнив:

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

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

Babel .
TypeScript .
Progressive Web App support .
Vue Router .
Vuex (библиотека для управления состоянием Vue);
Препроцессоры CSS ( PostCSS , CSS modules , Sass , Less , Stylus ).
Модуль юнит-тестов Mocha или Jest .
Модуль E2E-тестов Cypress или Nightwatch .

Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

Затем выполните следующую команду:

Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!

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

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь .

Что такое служба CLI Vue?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

Анатомия проекта

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

Файлы и папки в проекте Vue:

public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
src – папка содержит исходные файлы проекта.
src/assets – папка содержит ресурсы проекта, такие как png.
src/components – папка содержит компоненты Vue.
src/App.vue – основной компонент Vue-проекта.
src/main.js – основной файл проекта, который загружает Vue-приложение.
config.js – файл конфигурации для Babel.
json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

Плагины CLI Vue

Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.

Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.

Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.

Официальные плагины Vue CLI 3:

Typescript;
PWA;
Vuex;
Vue Router;
ESLint;
Unit testing etc.

Как добавить плагин Vue

Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.

Полезные плагины Vue

Существует много плагинов Vue CLI, которые могут оказаться полезными для ваших проектов. Например, библиотека Vuetify UI и Storybook . Вы также можете использовать плагин Electron Builder для быстрого создания Vue-проекта на основе Electron.

Я также создал несколько расширений:

vue-cli-plugin-nuxt : плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js.
vue-cli-plugin-bootstrap : плагин Vue CLI для добавления Bootstrap 4 в проект.

А что насчёт webpack?

Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:

Создать файл config.js в корневом каталоге проекта, а затем выполнить настройку в параметре configureWebpack:

Больше о работе с Vue CLI и webpack .

Пользовательский интерфейс CLI Vue 3

Теперь рассмотрим пользовательский интерфейс Vue CLI . Третья версия утилиты предоставляет современный веб-интерфейс, который позволяет создавать проекты и управлять ими без использования командной строки. Чтобы запустить графический интерфейс, выполните следующую команду:

Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».

После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.

Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:

Продолжим с установкой по умолчанию.

Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».

Слева от панели настройки расположены ссылки на различные разделы:

Перейдите на страницу «Tasks».

Остановить проект можно с помощью кнопки « Stop task ».

Заключение

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

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

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

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

Мы собираемся создать наш интерфейс как SPA (одностраничное приложение). Это тип веб-приложения, которое никогда не перезагружается, потому что оно переписывает содержимое одного файла HTML, что обеспечивает более плавный пользовательский интерфейс и ощущение, что оно похоже на настольное приложение.

Установка Vue CLI и запуск нового проекта

Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:

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

Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:

Через некоторое время мастер установки задаст нам несколько вопросов.

Подробности проекта

Первый вопрос: Project name (имя проекта). Назовем его, account-owner-client , вы можете назвать его как захотите, главное чтобы имя пакета узла не содержало заглавных букв, и лучше всего вводить имя в Kebab Case.

Второй вопрос: Project description (Описание проекта). А для этого мы напишем Account Owner Client Если хотите, можете написать что то свое.

Третий вопрос: Author (Автор). Сюда нужно ввести свое имя и адрес электронной почты в указанном формате Имя <[email protected]> .

Настройка Vue.js и ESLint

Четвертый вопрос: необходимо выбрать сборку Vue: Runtime + Compiler или просто Runtime . Мы выберем, Runtime + Compiler потому что мы собираемся писать компоненты Vue.js, а для этого нам нужен компилятор.

Пятый вопрос: нужен ли нам vue-router , чтобы создать несколько страниц для навигации. Мы ответим утвердительно, напечатав Y .

Шестой вопрос - хотим ли включить ESLint в наш проект. ESLint - отличный пакет, который заботится о нашем стиле кода и заставляет нас писать код по строгим правилам, таким как отступ в коде, запись пробелов перед скобками в определениях функций, запись точки с запятой и многое другое. Ответим утвердительно, напечатав Y .

Седьмой вопрос: хотим ли мы использовать ESLint preset . ESLint preset - это набор правил, и существует множество предустановок, потому что у людей разные предпочтения, и, например, некоторым нравится ставить точку с запятой в конце строки, а другим нет. Мастер попросит нас выбрать между Standard preset , Airbnb preset или написать свои собственные правила. Вы можете выбрать то, что подходит вашему стилю, и изменить это позже в .eslintrc.js файле.

Настройка тестов и прочего.

Восьмой вопрос касается модульных тестов, и мы напечатаем, n потому что мы не будем рассматривать какие-либо типы тестов в данной статье.

Девятый вопрос касается тестов e2e, и мы снова напечатаем n .

Десятый и последний вопрос: нужно ли запускать мастер npm install для установки всех необходимых нам зависимостей. Мы выберем Yes, use NPM чтобы установить все необходимые зависимости.

Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:

Подождем, пока он npm все установит, а затем откроем проект любым редактором кода и проанализируем структуру проекта. Могу посоветовать - использовать Visual Studio Code, потому что у него есть отличные расширения, которые могут нам очень помочь при создании приложений Vue.js, например Vue.js Extension Pack.

Обзор структуры проекта

После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:

Пояснение к наиболее важным файлам и папкам:

src - Исходный код нашего проекта:
- assets - Ресурсы модуля, которые будут обрабатываться с помощью Webpack
- components - здесь мы храним наши компоненты пользовательского интерфейса
- router - здесь мы пишем маршруты и подключаем их к нашим компонентам пользовательского интерфейса
- App.vue - это компонент точки входа, это основной компонент пользовательского интерфейса, в котором будут отображаться все остальные компоненты.
- main.js - файл точки входа, который будет монтироваться App.vue - наш основной компонент пользовательского интерфейса
Взглянем на файл index.html :

Единственная важная вещь в этом файле - это тег div с id app , который будет заменен нашим компонентом App.vue . В следующей строке мы можем заметить комментарий, в котором говорится: «созданные файлы будут автоматически встроены». Итак, наш js-файл, который идет в комплекте с Webpack , будет вставлен под div с id

Должно быть вы помните, что main.js это наша точка входа, верно? Давайте посмотрим на файл main.js , который является первым файлом, который запускается при запуске приложения:

Мы создаем экземпляр нового компонента Vue, который будет монтировать наш App.vue компонент внутри div с app атрибутом id - вы помните div с id app в index.html? Наконец, мы уведомляем наш компонент Vue об использовании маршрутизатора.

Структура компонента

Обратите внимание на следующий компонент:

Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.
- Шаблон - это видимое содержимое компонента
- Скрипт - это логика компонента
- Стили, как вы уже догадались, - это стили шаблона.
Шаблон

В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим <router-view/> элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.

Сценарий

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

Стили

Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так: <style scoped> . Этот тип стиля влияет только на шаблон этого компонента и корневой элемент дочерних компонентов, поэтому стиль не может попасть в другой компонент. В противоположность этому стили без области видимости будут совместно использоваться компонентами.

Маршрутизатор

Обратим внимание на файл router/index.js :

В этом файле мы снова импортируем Vue,

Затем обратите внимание создание экземпляра маршрутизатора и списка маршрутов. Мы можем указать путь, / который означает, что когда мы открываем наше приложение и переходим к root (главной странице) ( / ), то нам будет показан компонент HelloWorld . Помните, что содержимое этого компонента будет включено в компонент App.vue внутри тега <router-view/>

Мы не собираемся анализировать файл HelloWorld.vue , потому что он почти такой же, как и файл App.vue . Это просто еще один компонент с некоторым содержанием в шаблоне, и мы посмотрим, как он выглядит, но на этот раз в браузере.

Запуск приложения

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

Введите эту команду в терминал:

Эта статья — пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Начнём с создания нового приложения Vue, используя Vue CLI, а затем перейдём к выполнению основных операций CRUD с помощью RESTful API на бэкенде под управлением Python и Flask.
- Vue v2.5.2,
- Vue CLI v2.9.3,
- Node v10.3.0,
- npm v6.1.0,
- Flask v1.0.2,
- Python v3.6.5.
К концу этого урока вы узнаете:
- что такое Flask;
- что такое Vue и как он соотносится с другими UI-библиотеками и фронтенд-фреймворками вроде Angular и React.
- выстраивать Vue-проект, используя Vue CLI;
- создавать и рендерить компоненты Vue в браузере;
- создавать одностраничные приложения с компонентами Vue;
- подключать Vue-приложение к бэкенду Flask;
- разрабатывать RESTful API с помощью Flask;
- стилизовать компоненты Vue с помощью Bootstrap;
- использовать Vue Router для создания маршрутов и рендеринга компонентов.
Что такое Flask?

Flask — это простой, но мощный микро-фреймворк для Python, идеально подходящий для создания RESTful API. Как Sinatra (Ruby) и Express (Node), он минималистичен и гибок, поэтому вы можете начинать с простых проектов и при необходимости создавать более сложные приложения.

Если вы первый раз работаете с Flask, вам стоит изучить следующие ресурсы:

Что такое Vue?

Vue — это JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов. Он содержит некоторые из лучших концепций React и Angular, но по сравнению с ними он более доступен, поэтому новички могут быстро приступать к работе. Также он не уступает этим фреймворкам в мощности и предоставляет все необходимые функции для создания современных фронтенд-приложений.

25–27 ноября, Онлайн, Беcплатно

Чтобы узнать больше о Vue, а также о плюсах и минусах его использования по сравнению с Angular и React, можете посмотреть следующие статьи:

Если вы первый раз работаете с Vue, вам следует прочитать введение из официального руководства Vue.

Настройка Flask

Начнём с создания новой директории проекта:

В директории flask-vue-crud создайте новый каталог с именем server . Затем в этом каталоге создайте и активируйте виртуальную среду разработки:

Вышеуказанные команды могут отличаться в зависимости от вашей среды разработки.

Установите Flask вместе с расширением Flask-CORS:

Добавьте файл app.py в только что созданный каталог:

Flask-CORS нужен для отправки cross-origin-запросов (запросы, исходящие из другого протокола, IP-адреса, имени домена или порта), поэтому необходимо включить общий доступ к ресурсам (CORS).

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

Нажмите Ctrl + C , чтобы завершить работу сервера. Затем вернитесь к корневой папке проекта. Теперь перейдём к фронтенду и настроим Vue.

Настройка Vue

Для создания индивидуального темплейта проекта используем мощный интерфейс Vue CLI.

Установите его глобально:

Если вы первый раз работаете с npm, вам будет полезно почитать официальное руководство по нему.

В каталоге flask-vue-crud выполните следующую команду для инициализации нового проекта Vue под именем client с конфигом webpack:

webpack — это пакетный модуль и инструмент для сборки, используемый для создания, минимизации и объединения файлов JavaScript и других клиентских ресурсов.

Шаги создания нового проекта Vue:
1. Vue-сборка: Runtime + Compiler.
2. Установить vue-router? — Да.
3. Использовать ESLint для линтинга кода? — Да.
4. Выберите пресет ESLint — Airbnb.
5. Настроить юнит-тесты? — Нет.
6. Настроить тесты e2e с Nightwatch? — Нет.
7. Запустить установку npm после создания проекта? — Да, использовать NPM.
Должно получиться следующее:

Обратите внимание на сгенерированную структуру проекта. Она может показаться большой, но по факту вы будете иметь дело только с файлами и папками в каталоге /src вместе с файлом index.html .

Файл index.html является отправной точкой данного Vue-приложения.

Также обратите внимание на элемент <div> с идентификатором app . Это контейнер, который Vue будет использовать для присоединения сгенерированных HTML и CSS при создании пользовательского интерфейса.

Файлы и каталоги внутри папки src :

main.js — точка входа в приложение, которая загружает и инициализирует Vue вместе с корневым компонентом.
App.vue — корневой компонент, из которого будут рендериться все остальные компоненты (отправная точка).
assets — место хранения статических ассетов вроде изображений и шрифтов.
components — место хранения UI-компонентов.
router — место определения URL-адресов и сопоставление их с компонентами.

Взгляните на файл client/src/components/HelloWorld.vue . Это компонент Single File, который разбит на три разных подраздела:
- template: для компонентного HTML;
- script: здесь компонентная логика реализована через JavaScript;
- style: для стилей CSS.
Добавьте новый компонент с именем Ping.vue в папку client/src/components :

Обновите файл client/src/router/index.js так, чтобы он отображал / в компонент Ping:

В client/src/App.vue удалите изображение из темплейта:

Теперь в браузере должно отобразиться « Hello! ».

Чтобы соединить клиентское Vue-приложение с бэкендом на Flask, можно использовать библиотеку axios для отправки AJAX-запросов.

Начнём с установки:

Обновим раздел script компонента в Ping.vue следующим образом:
Создание веб-приложения с помощью Vue.js, Vuetify и Firebase
Настройка Bootstrap

Добавим Bootstrap, чтобы можно было быстро настроить стиль приложения.

Игнорируйте предупреждения для jquery и popper.js . Не добавляйте их в свой проект.

Импортируем стили Bootstrap в client/src/main.js :

Обновим раздел style в client/src/App.vue :

Убедитесь, что Bootstrap подключён корректно, используя Button и Container в компоненте Ping :

Добавим компонент Books в новый файл Books.vue :

Для избавления от хеша в URL замените mode на history , чтобы использовать history API браузера для навигации:

Добавим таблицу в стиле Bootstrap в компонент Books :

Отображаться должно следующее:

Теперь можно приступить к созданию функциональности CRUD-приложения.

Что будем создавать?

GET-маршрут

Сервер

Добавим список книг в server/app.py :

Добавим обработчик маршрута:

Клиент

После инициализации компонента вызываем метод getBooks() через хук жизненного цикла (lifecycle hook) created, который выбирает книги из только что настроенного маршрута на бэкенде.

Больше информации про Lifecycle Hook находится здесь.

В темплейте просматривается список книг с помощью директивы v-for, которая создаёт новую строку таблицы на каждой итерации. Значение индекса используется в качестве ключа (key). Затем используется директива v-if для отображения Yes или No — читал пользователь книгу или нет.

Bootstrap Vue

В следующем разделе используем компонент Modal для добавления новых книг. Для этого добавим библиотеку Bootstrap Vue, которая предоставляет набор Vue-компонентов, стилизованных с помощью HTML и CSS на основе Bootstrap.

Выбор Bootstrap Vue обоснован тем, что компонент Modal Bootstrap использует jQuery. Следует избегать совместного использования jQuery и Vue в одном проекте, поскольку последний использует Virtual Dom для обновления DOM-структуры. Другими словами, если вы используете jQuery для манипуляций с DOM, Vue об этом не узнает. По крайней мере, если вам необходимо использовать jQuery, не используйте его вместе с Vue на одних и тех же элементах DOM.

Подключим библиотеку Bootstrap Vue в файле client/src/main.js :

POST-маршрут

Сервер

Обновим существующий обработчик маршрута для обработки POST-запросов для добавления новых книг:

Запустив сервер Flask, вы можете проверить POST-маршрут на новой вкладке браузера:

Клиент

Внесём следующий modal для добавления новой книги. Начнём с HTML:

Эту часть нужно добавить непосредственно перед закрывающим тегом </div> . Взгляните на код, v-model — это директива, используемая для привязки входных значений обратно к стейту.

Что делает Hide-Footer , вы можете просмотреть самостоятельно в документации по Bootstrap Vue.

Обновим раздел script :

Рассмотрим, что происходит в этом фрагменте кода.
1. addBookForm() привязывается к входным данным формы через v-model . Это называется двусторонней привязкой. Узнать об этом подробнее вы можете здесь.
2. onSubmit() запускается, когда пользователь успешно отправляет форму. При отправке предотвращается обычное поведение браузера ( evt.preventDefault() ), закрывается modal ( this.$Refs.addBookModal.hide() ), запускается метод addBook() и очищается форма ( initForm() ).
3. addBook() отправляет POST-запрос в /books для добавления новой книги.
4. Остальные изменения вы можете посмотреть самостоятельно в документации Vue по мере необходимости.
Теперь обновим кнопку «Add Book» в темплейте, чтобы при её нажатии отображался modal:

Теперь компонент должен выглядеть следующим образом:

Можно выполнить проверку, попробовав добавить книгу.

Компонент Alert

Добавим новый файл с именем Alert.vue в каталог client/src/components :

Затем импортируем его в разделе script компонента Books и зарегистрируем:

Теперь можно ссылаться на новый компонент в разделе template :

Обновите браузер. Должно быть отображено следующее:

Теперь добавим фактический компонент b-alert в шаблон:

Больше информации о props находится здесь.

Добавьте message в параметр data в Books.vue :

Добавим v-if , чтобы alert отображался, только если showMessage имеет значение true :

Добавим showMessage в data :

Снова обновим addBook() , установив в showMessage значение true :

Теперь можно проверить работу.

PUT-маршрут

Сервер

Для обновлений необходимо использовать уникальный идентификатор, поскольку нельзя полагаться на то, что заголовок книги будет уникальным. Можно использовать uuid из стандартной библиотеки Python.

Обновим BOOKS в server/app.py :

Также не забудьте импортировать:

Рефакторинг all_books для учёта уникального идентификатора при добавлении новой книги:

Добавим новый обработчик маршрута:

Добавим вспомогательную функцию:

Клиент

Будем идти пошагово:
1. Добавление modal и формы.
2. Обработка нажатия кнопки Update.
3. Подключение AJAX-запроса.
4. Оповещение пользователя (Alert).
5. Обработка нажатия кнопки Cancel.
1. Добавление modal и формы

Сначала добавим новый modal к темплейту, сразу после первого modal:

Добавим стейт формы в часть data раздела script :

2. Обработка нажатия кнопки Update

Обновим кнопку «Update» в таблице:

Добавим новый метод для обновления значений в editForm :

Затем добавим метод, обрабатывающий отправку формы:

3. Подключение AJAX-запроса

4. Оповещение пользователя (Alert)

5. Обработка нажатия кнопки Cancel

Обязательно протестируйте приложение. Убедитесь, что modal отображается при нажатии кнопки и что введённые значения заполнены правильно.

DELETE-маршрут

Сервер

Обновим обработчик маршрута:

Клиент

Обновим кнопку «Delete» следующим образом:

Добавим методы для обработки нажатия кнопки, а затем удалим книгу:

Когда пользователь нажимает кнопку удаления, вызывается метод onDeleteBook() , который запускает другой метод removeBook() . Этот метод отправляет DELETE-запрос на сервер. Когда приходит ответ, отображается Alert и запускается getBooks() .

Заключение

В этой статье были рассмотрены основы настройки CRUD-приложения с помощью Vue и Flask. Исходный код из тега v1 вы можете найти в репозитории flask-vue-crud.

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

Если вы никогда не создавали приложение Vue.js, я собираюсь провести вас через задачу его создания и понять, как оно работает.

Первый пример

Сначала я воспользуюсь самым простым примером использования Vue.

Вы создаете HTML-файл, содержащий

Я помещаю теги сценария в конец тела, чтобы они выполнялись по порядку после загрузки DOM.

Затем он связывает этот шаблон с data объект. Это специальный объект, в котором хранятся данные, которые мы хотим визуализировать с помощью Vue.

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

Посмотреть на Codepen

Codepen немного отличается от использования обычного HTML-файла, и вам нужно настроить его так, чтобы он указывал на расположение библиотеки Vue в настройках Pen:

Второй пример: приложение Vue CLI по умолчанию

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

Что такое Vue CLI? Это утилита командной строки, которая помогает ускорить разработку, создавая для вас скелет приложения с образцом приложения.

Вы можете получить это приложение двумя способами.

Используйте Vue CLI локально

Первый - установитьVue CLIна вашем компьютере и запустите команду

Использовать CodeSandbox

CodeSandbox - отличный редактор кода, который позволяет создавать приложения в облаке, что позволяет использовать любой пакет npm, а также легко интегрироваться с Zeit Now для легкого развертывания и GitHub для управления версиями.

Эта ссылка, которую я поместил выше, открывает приложение Vue CLI по умолчанию.

Независимо от того, выбрали ли вы Vue CLI локально или через CodeSandbox, давайте подробно рассмотрим это приложение Vue.

Структура файлов

Рядом package.json , который содержит конфигурацию, это файлы, содержащиеся в исходной структуре проекта:
- index.html
- src/App.vue
- src/main.js
- src/assets/logo.jpg
- src/components/HelloWorld.vue
index.html

В index.html file - это главный файл приложения.

В теле он включает всего один простой элемент: <div ></div> . Это элемент, который приложение Vue будет использовать для присоединения к DOM.

src/main.js

Это основные файлы JavaScript, которыми управляет наше приложение.

Сначала мы импортируем библиотеку Vue и компонент приложения из App.vue .

Мы устанавливаем для productionTip значение false, чтобы Vue не выводил «ты в режиме разработкиПодсказка в консоли.

src/App.vue

App.vue представляет собой однофайловый компонент. Он содержит 3 блока кода: HTML, CSS и JavaScript.

Сначала это может показаться странным, но однофайловые компоненты - отличный способ создать автономные компоненты, которые имеют все необходимое в одном файле.

У нас есть разметка, JavaScript, который будет с ним взаимодействовать, и стиль, который к нему применяется, который может быть ограничен или нет. В этом случае он не ограничен, а просто выводит тот CSS, который применяется к странице как обычный CSS.

Интересная часть заключается в script тег.

Мы импортируемкомпонентот components/HelloWorld.vue файл, который мы опишем позже.

На этот компонент будет ссылка в нашем компоненте. Это зависимость. Мы собираемся вывести этот код:

из этого компонента, который, как вы видите, ссылается на компонент HelloWorld. Vue автоматически вставит этот компонент в этот заполнитель.

src/components/HelloWorld.vue

Вот компонент HelloWorld, который входит в состав компонента App.

Помните, выше мы говорили о CSS в App.vue, который не имеет области видимости? Компонент HelloWorld имеет область видимости CSS.

Вы можете легко определить это, посмотрев на style тег. Если у него есть scoped атрибут, тогда его область действия: <style scoped>

Это означает, что сгенерированный CSS будет однозначно нацелен на компонент через класс, который Vue прозрачно применяет. Вам не нужно беспокоиться об этом, и вы знаете, что CSS неутечкав другие части страницы.

Все, что хранится в data доступен непосредственно в шаблоне по его собственному имени. Нам не нужно было говорить data.msg , только msg .

Запустите приложение

CodeSandbox имеет отличную функцию предварительного просмотра. Вы можете запустить приложение и отредактировать что-либо в источнике, чтобы это сразу отразилось в предварительном просмотре.

Читайте также: