Vue 3

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


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


Главная О проекте Карта сайта 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"). Давайте, вместе его и пройдем для начала. Вместе, все-таки, веселее.




Ссылки по теме.





wpvi.ru JS jQuery конь шахматы youtube React Redux Copyright AV wpvi.ru © 2020-2099 :: :: Иконка живая