Meteor Vue.js: от разработки до развертывания

В этой статье мы узнаем, как использовать удивительные возможности vue.js в качестве внешнего интерфейса метеора для создания самого мощного в мире приложения TODO. Мы рассмотрим интеграцию meteor vue, vuetify, публикацию и подписку, модульное тестирование сервера и клиента и, наконец, развертывание в Интернете и на мобильных устройствах.

Для создания нашего «самого мощного в мире приложения TODO» нам понадобится следующее: текстовый редактор (Webstorm, VSCode), ваш мозг и две чашки кофе. Это хорошая вещь о метеоре, устанавливает все, что вам нужно из коробки.

Установка Meteor на OSX/LINUX

Запустите следующую команду в своем терминале, чтобы установить последнюю официальную версию Meteor:

curl https://install.meteor.com/ | sh

Установка Метеора на Windows

Сначала устанавливаем Шоколад:

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Затем запустите эту команду с помощью командной строки администратора:

choco install meteor

Создание приложения Meteor

Теперь, когда метеор установлен, мы можем создать новый проект метеора, запустив:

meteor create the-todos-app

это создаст новый проект метеора с Blaze в качестве внешнего интерфейса по умолчанию. чтобы использовать Vue, мы должны установить Vue.js, используя:

meteor npm install --save vue
meteor add akryum:vue-component

Пакет akryum:vue-component meteor позволяет использовать Однофайловые компоненты Vue с расширениями файлов .vue в вашем приложении meteor, как в традиционном проекте Vue.

Теперь давайте создадим и изменим эти три файла: /client/App.vue Корневой компонент вашего приложения /client/main.js Инициализация приложения Vue при запуске Meteor/client/main.html, содержащий тело с блоком #app div Нам нужен базовый HTML-документ с идентификатором app.

//App.vue
<template>
    <div>
        <p>This is a Vue component and below is the current date:<br />{{date}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                date: new Date(),
            };
        }
    }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>
//client/main.js
import Vue from 'vue';
import App from './App.vue';
import './main.html';

Meteor.startup(() => {
  new Vue({
    el: '#app',
    ...App,
  });
});
<!--client/main.html-->
<head>
    <title>The Todo App</title>
</head>

<body>
<div id="app"></div>

</body>

Чтобы запустить новое приложение:

meteor

У вас должна быть такая страница

Добавление Vuetify

Чтобы установить vuetify, просто выполните следующую команду

meteor npm install vuetify

Затем импортируйте vuetify в ваш client/main.js, это должно выглядеть так:

//client/main.js
import Vue from 'vue';
import App from './App.vue';
import './main.html';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const vuetify = new Vuetify({})
Meteor.startup(() => {
  new Vue({
    el: '#app',
    vuetify,
    ...App,
  });
});

Vuetify использует значки материального дизайна, поэтому давайте добавим их в client/main.html через CDN.

Теперь давайте добавим готовый макет из vuetify в client/App.vue.

Добавление маршрутизации

Хорошая новость в том, что мы все еще можем использовать vue router… поторопитесь🎉. Давайте продолжим и установим, используя:

meteor npm install vue-router

Теперь мы можем использовать vue-router так же, как в традиционном проекте vue CLI. Давайте создадим файл router.js в папке клиента, в котором будут все наши маршруты.

Далее давайте импортируем наш маршрутизатор vue в файл client/main.js.

.........
import router from './router.js'
........
Meteor.startup(() => {
  new Vue({
    el: '#app',
    router,
    vuetify,
    ...App,
  });
});
......

Давайте создадим несколько новых компонентов, чтобы мы могли осуществлять маршрутизацию между этими страницами. Мы собираемся создать новую папку в папке client, pages, чтобы просто упорядочить все различные компоненты, которые будут созданы. Мы создадим Mytodos.vue, Help.vue и Settings.vue.

Теперь мы можем добавить router-view и router-link в наш макет в client\App.vue.

<router-view></router-view>

Meteor Vue.js: от разработки до развертывания