Vue 3. Прогрессивный фреймворк для создания пользовательских интерфейсов
1. Возможно ли совместное использование Vue и jQuery на одной странице? Не будет ли конфликтов?
Vue | jQuery | ||
---|---|---|---|
{{ cnt1_vue }}
|
0
|
||
Интерес представляет "Кнопка обнуления счетчиков". При нажатии она вполне корректно одновременно обнуляет оба счетчика, и на Vue и на jQuery.
<button class="button1" style="width:420px;"
v-on:click="cnt1_vue=0" onclick="fun_cnt1_jquery_set_val(0);">
Кнопка обнуления счетчиков
</button>
На всякий случай.
Не используйте 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 - вот список установленных файлов.
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"). Давайте, вместе его и пройдем для начала. Вместе, все-таки, веселее.