Фреймворк Vue.js создавался как более «легкая» и быстрая альтернатива React.js.

Vue.js – это фреймворк для разработки на языке программирования JavaScript. Используется для быстрой разработки web-приложений и сайтов:

- Содержит удобные инструменты, позволяющие быстро создавать новые страницы сайта;

- Предоставляет возможность привязывать элементы этих страниц к данным и автоматически их обновлять при изменении данных;

- Автоматически обновляет JS и CSS стили при сохранении файла и проверяет JS и шаблоны на наличие ошибок;

- Предоставляет возможность сборки оптимизированной и сжатой версии приложения или сайта после окончании разработки;

- Для него создано огромное количество сторонних модулей, расширяющих функционал, например – PrimeVue (https://www.primefaces.org)

И много, многое другое.

Всё это сокращает срок разработки, избавляет программиста от глупых ошибок, экономя время и нервные клетки.

Установка

Установим требуемые пакеты: 

sudo npm install -g @vue/cli

Если по какой то причине у вас не работает команда vue после установки: 

vue --version
-bash: vue: команда не найдена

Попробуйте запустить: 

npx vue –version
@vue/cli 5.0.8

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

Перейдем в папку где будут хранится файлы, я предпочитаю использовать /var/www/ чтобы иметь возможность сразу получить доступ к сайту сразу после сборки.

Обратите внимание! Нельзя создавать проекты в папке /root! Иначе при попытке установки вы столкнетесь со множеством ошибок, например: 

> yorkie@2.0.0 install /root/weather-clock/node_modules/yorkie
> node bin/install.js

internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module '/root/weather-clock/node_modules/yorkie/bin/install.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []

Дождемся окончания загрузки и установки нужных пакетов и модулей. 

cd /var/www

Создадим наш проект, запустим: 

sudo vue create weather-clock

На экран будет выведено меню: 

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Просто нажмите Enter.

Начнется установка требуемых пакетов, дождитесь окончания процесса. 

🚀  Invoking generators...
📦  Installing additional dependencies...

added 94 packages from 62 contributors and audited 942 packages in 25.355s

99 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project weather-clock.
👉  Get started with the following commands:

 $ cd weather-clock
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

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

sudo chown -Rf user weather-clock

Перейдем в папку: 

cd weather-clock

Запустим сервер разработчика: 

npm run serve

Дождемся окончания сборки: 

DONE  Compiled successfully in 12086ms                                                                11:34:36


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.100:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Откроем страницу в браузере:

Мы успешно установили Vue.js!

Добавляем главную форму

Прервем работу сервера разработчика нажав в консоли Ctrl+C

Для дальнейшей проверки создадим новый файл: 

mkdir src/view/
mcedit src/view/MainForm.vue

С содержимым: 

<template>
<div class="clock_overlay">
    <div class="clock_digits">{{clock.h}}:{{clock.m}}:{{clock.s}}</div>
</div>
</template>
 
 <script>
export default {
  name: 'MainForm',
 data() {
    return {
        clock: {
            h: 8,
            m: 30,
            s: 10
        }
    };
  },
}
</script>

<style scoped>

.clock_overlay {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.clock_digits {    
    font-size: 120px;    
}
</style>

Изменим файл src/App.vue 

mcedit src/App.vue

Заменим содержимое на: 

<template>
  <MainForm />
</template>

<script>
import MainForm from './view/MainForm.vue';

export default {
  name: 'App',
  components: {
    MainForm
  }
}
</script>

<style>
</style>

Запустим сервер разработчика: 

npm run serve

В дальнейшем я рекомендую открывать еще одно окно с консолью, в которой постоянно будет висеть запущенный сервер!

Откроем вкладку с сайтом: 

http://192.168.1.100:8080/

Если она автоматически не обновилась – обновите вручную.

На странице отобразятся наши часы:

В данный момент они не идут, добавлением этого функционала мы займемся в следующей статье!

Заключение

Сегодня мы рассмотрели установку vue.js и даже создали шаблон для нашего будущего проекта часов с погодой.

Мы выяснили для чего нужен Vue.js.

Установили нужные пакеты.

Создали первый проект.

Запустили сервер разработчика.

Добавили новую страницу и обновили проект таким образом, чтобы он отображал нашу страницу по умолчанию.

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