README.md

Ориганальные статьи по разработке веб приложений на Vue.js находятся на сайте practical-web.ru/lessons-vue

ARTICLE.html

<h1 id="установка-vuejs-на-существующий-классический-сайт-чтобы-сделать-frontend-модуль-к-сайту-vue-вместо-jquery-урок-№1">Установка Vue.js на существующий классический сайт, чтобы сделать frontend модуль к сайту (Vue вместо jQuery) (Урок №1)</h1>
<h2 id="1-как-установить-vuejs-на-классический-сайт">1. Как установить Vue.js на классический сайт</h2>
<p>Допустим у нас есть некоторый сайт c серверной обработкой на php </p>
<p>В шапку сайта подключаем скрипт который можно скопировать из документации 
<a href="https://vuejs.org/guide/quick-start.html#using-vue-from-cdn">https://vuejs.org/guide/quick-start.html#using-vue-from-cdn</a></p>
<p>Следующая строчка подключения скрипта Vue.js</p>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/1.png" alt="Строчка подключения скрипта Vue.js"></p>
<p>Теперь мы можем пользоваться функционалом Vue.js на обычном сайте</p>
<h2 id="11-как-скачать-vuejs-на-обычный-сайт">1.1 Как скачать Vue.js на обычный сайт</h2>
<ol>
<li>Vue.js скачать можно в следующих репозиториях</li>
</ol>
<ul>
<li><a href="https://www.jsdelivr.com/package/npm/vue?tab=files&path=dist">https://www.jsdelivr.com/package/npm/vue?tab=files&amp;path=dist</a></li>
<li><a href="https://cdnjs.com/libraries/vue">https://cdnjs.com/libraries/vue</a></li>
<li><a href="https://unpkg.com/vue">https://unpkg.com/vue</a></li>
</ul>
<p><strong>Нас интересует сборка:</strong><br>vue.global.prod.min.js<br>или vue.global.prod.js  </p>
<ol start="2">
<li><p>Скачиваем файл и кладём в папку <strong>assets/js/libs/vue.3.3.4.global.prod.js</strong></p>
<blockquote>
<p>Указвыаем версию которую скачали в файле, чтобы когда выйдет новая версия 
мы могли понять это и скачать новую версию</p>
</blockquote>
</li>
<li><p>Подключаем Vue.js на страницу перед закрывающим тегом <code>&lt;/head&gt;</code></p>
</li>
</ol>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/2.png" alt=""></p>
<ol start="4">
<li>! Важно при этом удалить подключение файла из CDN если мы ранее его подключали</li>
</ol>
<h2 id="2-как-проиницилизировать-модуль-vuejs-на-обычном-сайте">2. Как проиницилизировать модуль Vue.js на обычном сайте</h2>
<ol>
<li>Создадим файл <code>assets/js/calculator.js</code> далее по тексту просто <code>calculator.js</code></li>
<li>Подключим его перед закрывающим <code>body</code></li>
</ol>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/3.png" alt=""></p>
<ol start="3">
<li>В <strong>body</strong> создадим обёртку <code>&lt;div id=&quot;calculator&quot; class=&quot;calculator&quot;&gt;</code> для нашего калькулятора</li>
<li>И подключим файл стилей <code>assets/css/calculator/index.css</code> где будем писать стили для калькулятора</li>
</ol>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/4.png" alt=""></p>
<ol start="5">
<li>В <code>calculator.js</code></li>
</ol>
<ul>
<li>Импортируем createApp из глобальной области видимости где у нас есть Vue зарегестрированный нами в теге <code>&lt;/head&gt;</code>   </li>
<li>Метод data возвращает объект с <u>состоянием</u> приложения - это ключевое понятие в фреймворке  <blockquote>
<p>Состояние приложения в Vue.js - это те данные которые будут отображаться в нашем приложении<br>Важно усвоить фундаментальную концепцию: в приложении отображение зависит от данных (состояния приложения)<br>Отображение не должно зависить от действий пользователя или любых других дейсвий системы<br><u>Повторение</u>: отображение зависит только от данных (состояния) приложения   </p>
</blockquote>
</li>
<li>В данных у нас пока одно свойство: message </li>
<li>Монтируем наше Vue приложение в id calculator</li>
</ul>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/5.png" alt=""></p>
<ol start="6">
<li>На нашем сайте мы получим выведенное свойство из данных приложения<br>&quot;Hello Vue!&quot;</li>
</ol>
<h2 id="3-итоги-подключения-vuejs-к-обычному-сайту">3. Итоги подключения Vue.js к обычному сайту</h2>
<ul>
<li>Научились подключать сборку Vue для обычного подключения в тело html в <code>&lt;/head&gt;</code>  </li>
<li>Научились инициализировать Vue приложение на определённой обёртке в html которая будет приложением Vue</li>
</ul>
<h2 id="код-данного-урока-хранится-в-github-репозитории">Код данного урока хранится в <a href="https://github.com/artemsites/lessons-vue/tree/lesson-1">GitHub репозитории</a></h2>
<h2 id="живой-пример-реализованных-компонентов-калькулятора-находится-здесь">Живой пример реализованных компонентов калькулятора находится <a target="_blank" href="https://practical-web.ru/demo/lessons/vue/calculator/" title="Открыть пример в новой вкладке">здесь</a></h2>
<p>Спасибо за внимание! Продолжение следует!  </p>

ARTICLE.md

Установка Vue.js на существующий классический сайт, чтобы сделать frontend модуль к сайту (Vue вместо jQuery) (Урок №1)

1. Как установить Vue.js на классический сайт

Допустим у нас есть некоторый сайт c серверной обработкой на php

В шапку сайта подключаем скрипт который можно скопировать из документации https://vuejs.org/guide/quick-start.html#using-vue-from-cdn

Следующая строчка подключения скрипта Vue.js

Теперь мы можем пользоваться функционалом Vue.js на обычном сайте

1.1 Как скачать Vue.js на обычный сайт

1. Vue.js скачать можно в следующих репозиториях

• https://www.jsdelivr.com/package/npm/vue?tab=files&path=dist
• https://cdnjs.com/libraries/vue
• https://unpkg.com/vue

Нас интересует сборка:
vue.global.prod.min.js
или vue.global.prod.js

2. Скачиваем файл и кладём в папку assets/js/libs/vue.3.3.4.global.prod.js

Указвыаем версию которую скачали в файле, чтобы когда выйдет новая версия мы могли понять это и скачать новую версию

3. Подключаем Vue.js на страницу перед закрывающим тегом </head>

4. ! Важно при этом удалить подключение файла из CDN если мы ранее его подключали

2. Как проиницилизировать модуль Vue.js на обычном сайте

1. Создадим файл assets/js/calculator.js далее по тексту просто calculator.js
2. Подключим его перед закрывающим body

3. В body создадим обёртку <div id="calculator" class="calculator"> для нашего калькулятора
4. И подключим файл стилей assets/css/calculator/index.css где будем писать стили для калькулятора

5. В calculator.js

• Импортируем createApp из глобальной области видимости где у нас есть Vue зарегестрированный нами в теге </head>
• Метод data возвращает объект с состоянием приложения - это ключевое понятие в фреймворке

Состояние приложения в Vue.js - это те данные которые будут отображаться в нашем приложении
Важно усвоить фундаментальную концепцию: в приложении отображение зависит от данных (состояния приложения)
Отображение не должно зависить от действий пользователя или любых других дейсвий системы
Повторение: отображение зависит только от данных (состояния) приложения

• В данных у нас пока одно свойство: message
• Монтируем наше Vue приложение в id calculator

6. На нашем сайте мы получим выведенное свойство из данных приложения
   "Hello Vue!"

3. Итоги подключения Vue.js к обычному сайту

• Научились подключать сборку Vue для обычного подключения в тело html в </head>
• Научились инициализировать Vue приложение на определённой обёртке в html которая будет приложением Vue

Код данного урока хранится в GitHub репозитории

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

Спасибо за внимание! Продолжение следует!

Видео-разбор статьи

[[youtube id="HHo8gEeLPl0"]]