Покажи, как связать Vue и замечательное приложение Meteor.

tl; dr;

  1. Установите Meteor, Vue и Vue-компонент
  2. Запустить приложение Vue
  3. Создать компонент приложения
  4. …
  5. ВЫГОДА!!!

Препараты

Метеор

Начнем с установки необходимых библиотек, таких как, конечно же, Meteor. Пользователи Windows могут загрузить пакет с официального сайта, а пользователи macOS и * unix могут установить его, запустив следующий код:

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

Теперь, когда у нас установлен Meteor, нам нужно создать новый проект с базовым кодом. Сделайте это, набрав следующее:

meteor create Abee
cd Abee

Здорово!

Vue и Vue-компонент

Этот шаг не будет сложнее предыдущего. Meteor поддерживает два типа систем пакетов для работы: NPM и Atmosphere. Вы можете прочитать об обоих методах в официальной документации, но нам просто нужно добавить необходимые пакеты.

Установка современного Vue немного сложнее, чем vue-component.

Сначала введите в свой терминал:

meteor add akryum:vue

чтобы добавить пакет Atmosphere, а затем запустить

meteor npm install --save vue@^2.0.3`

для установки последней версии Vue.

Хорошо, последний шаг в наших приготовлениях - установка vue-component. Сделайте это, набрав

meteor add akryum:vue-component

Легкий!

Чтобы выяснить, что мы установили на данный момент, мы можем запустить команду meteor list.

Запустить приложение Vue

Наш проект уже может стартовать. В нем есть все необходимые файлы:

client/main.js      # a JavaScript entry point loaded on the client client/main.html    # an HTML file that defines view templates client/main.css     # a CSS file to define your app's styles server/main.js      # a JavaScript entry point loaded on the server package.json        # a control file for installing NPM packages .meteor             # internal Meteor files
.gitignore          # a control file for git

Теперь мы готовы написать что-то, что будет работать для нас!

Для запуска приложения Vue нам нужна точка входа, вроде функции инициализации. Откройте client/main.html файл и удалите весь код ниже раздела head. И добавьте этот код вместо предыдущего.

<body>
    {{> vue_app}}
</body>
<template name="vue_app">
    <div id="app"></div>
</template>

После этого мы должны запустить наше приложение Vue.

import { Template } from 'meteor/templating'
// don't forget to import Vue
import Vue from 'vue'
// if you are familiar with Vue and want to add VueRouter
// feel free to code it and import here
// import router from './router'
import './main.html'
Template.vue_app.rendered = function() {
  // Create new Vue application
  const vm = new Vue({
    el: '#app',
    // router,  # if we have it
    render: h => h(App)
  })
}

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

Создать компонент приложения

Если вы поставите метеор в этот момент и перейдете по адресу http: // localhost: 3000, вы на самом деле ничего не получите. Это потому, что в нашем приложении нет никаких компонентов или тегов. Давай исправим.

Создайте новый файл с именем App.vue, поместите его в client/App.vue и добавьте внутрь код:

<template>
    <div id="app">
        <header>
            <h1>Abee, the Meteorite</h1>
        </header>
        <div>
            <h2>Welcome {{ user }}!</h2>
            <label>
                Your name: 
                <input type="text" v-model="user" autofocus />
            </label>
        </div>
    </div>
</template>
<script>
export default {
    data: () => ({
        user: '%username%'
    })
}
</script>

Конечно, чтобы это работало правильно, мы должны импортировать его в наш client/main.js файл.

import { Template } from 'meteor/templating'
// don't forget to import Vue
import Vue from 'vue'
// if you are familiar with Vue and want to add VueRouter
// feel free to code it and import here
// import router from './router'
import './main.html'
// import Vue App component
import App from './App.vue'
Template.vue_app.rendered = function() {
  // Create new Vue application
  const vm = new Vue({
    el: '#app',
    // router,  # if we have it
    render: h => h(App)
  })
}

Это все! Теперь вы можете снова запустить метеор, если остановили его раньше, и посмотреть, что случилось.

Ага, я солгал. Я немного поработал с Milligram CSS :)

Исходный код находится на GitHub.

Выгода

Хорошо, теперь о прибыли. Как видите, эта статья не о том, «давайте создадим какое-нибудь большое приложение с блэкджеком и… ну, вы знаете». Это вводное руководство, которое поможет новичкам создать свое первое приложение с мощью Meteor и простотой Vue. Небольшое движение для отличного начала.

Прибыль скоро придет. :)

Доброго дня,
Андрей Максимов