Vue 3 - прогрессивный фреймворк для создания пользовательских интерфейсов

Vue 3. Прогрессивный фреймворк для создания пользовательских интерфейсов

1. Возможно ли совместное использование Vue и jQuery на одной странице? Не будет ли конфликтов?

Тестирование совместного использования Vue и jQuery на одной странице
Vue		jQuery
{{ cnt1_vue }}		0

Выше реализован один и тот же функционал (счетчики кликов) на Vue и jQuery. Они работают на одной странице и не мешают друг другу.

Интерес представляет "Кнопка обнуления счетчиков". При нажатии она вполне корректно одновременно обнуляет оба счетчика, и на Vue и на jQuery.

 
<button class="button1" style="width:420px;" 
v-on:click="cnt1_vue=0" onclick="fun_cnt1_jquery_set_val(0);">
Кнопка обнуления счетчиков
</button>

Тут мы видим, что на одну кнопку повешены 2 события (Vue и jQuery), каждое из них обнуляет свой счетчик и они не мешают друг другу.

На всякий случай.

Не используйте jQuery вот так:

$(document).ready(function() {

Используйте jQuery вот так:

jQuery(document).ready(function() {

2. Как установить Vue и начать использовать?

https://vuejs.org/ - Главная страница проекта Vue.

https://v3.vuejs.org/ - Главная страница проекта Vue - версия 3. Эта версия актуальная по состоянию на сегодня 20210802.

https://v3.vuejs.org/guide/introduction.html - инструкция для Vue - версия 3. Введение.

https://v3.vuejs.org/guide/installation.html - инструкция для Vue - версия 3. Установка.

Предлагается 4 способа добавить Vue в Ваш проект.

1. Подцепиться к библиотеке (фреймворку) Vue через unpkg.com:

<script src="https://unpkg.com/vue@next"></script>

2. Скачать JS файлы и хостить их самому используя следующие ресурсы для скачивания:

https://unpkg.com/browse/vue@next/dist/

... или ...

https://cdn.jsdelivr.net/npm/vue@next/dist/

Краткая инструкция для скачивания с UNPKG (для jsdelivr аналогично).

- Убедитесь, что выбранная версия ок (в моем случае это была 3.1.5)
- Нажимаете на первый файл в списке.
- Нажимаете кнопку "View Raw"
- Нажимаете CTRL-S и сохраняете файл в подготовленную папку.

Аналогично скачиваете все остальные файлы.

3. Установка с использованием npm:


# latest stable


$ npm install vue@next

4. Установка с использованием CLI:

Vue предоставляет официальный интерфейс командной строки (CLI - Command Line Interface) для быстрого создания одностраничных приложений.

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

Я сделал установку по способу 2 - вот список установленных файлов.

Список файлов Vue для установки, версия 3.1.5
NN	Файл	Размер, байт
1	vue.cjs.js	2 725
2	vue.cjs.prod.js	2 147
3	vue.d.ts	268
4	vue.esm-browser.js	578 783
5	vue.esm-browser.prod.js	119 229
6	vue.esm-bundler.js	2 629
7	vue.global.js	607 144
8	vue.global.prod.js	116 631
9	vue.runtime.esm-browser.js	395 867
10	vue.runtime.esm-browser.prod.js	76 765
11	vue.runtime.esm-bundler.js	611
12	vue.runtime.global.js	418 801
13	vue.runtime.global.prod.js	76 154

В принципе, Вы можете скачать нужные файлы и с этого сайта, но лучше это сделать так, как написано в инструкции (см выше).

А какие файлы вообще нужны?

Если верить той же инструкции (а кому еще верить?) - то точно нужен файл vue.global.js, возможно, также нужен файл vue.global.prod.js для боевых схем (он меньше по размеру, вероятно, рекомендация установки его на промышленную эксплуатацию связана с экономией трафика).

Чтобы понять нужность остальных файлов, следует более тщательно читать инструкции.

Я сделал так. Скачал и установил на своем хостинге все файлы в одну папку. А подключаю только 1 файл:

<script src="/js/vue/vue.global.js"></script>

Вроде бы работает ок.

3. Как изучить Vue с нуля?

Много разных курсов по Vue, включая курсы для новичков. Сам разработчик рекомендует курс для новичков "Intro to Vue 3" ("Введение в Vue 3"). Давайте, вместе его и пройдем для начала. Вместе, все-таки, веселее.