В Gilt мы любим Коа. (Черт, Я люблю Koa.) Приступая к новому проекту, я хотел попробовать что-то, что не было React или Angular. Покопавшись в альтернативах, я попал на Vue.js. Я взял самые острые ножницы, какие смог найти, и побежал.
Избранная технология
Если вы не слышали о Коа:
Koa - это новый веб-фреймворк, разработанный командой Express, целью которой является создание более компактной, более выразительной и надежной основы для веб-приложений и API.
Коа Экспресс без наворотов с завода. Koa - это серийный автомобиль, на который вы устанавливаете запасные части в соответствии с вашими потребностями. Это чертовски быстро. Он маленький. Работать с ним чертовски приятно. Koa2 повышает производительность и использует шаблоны ожидания / асинхронности.
Если вы еще не слышали о Vue.js;
Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов. … Vue разработан с нуля для постепенного внедрения. … Ориентирован только на уровень представления, а также отлично подходит для сложных
одностраничных приложений.
По сути, Vue.js берет хорошие части из React, Angular и Aurelia и объединяет их в одну библиотеку. Кто хочет работать быстро?.
Ребятам из React это не понравится, потому что здесь нет JSX и есть двусторонняя привязка. Я копаю это прямо, потому что лично считаю JSX мерзостью, но более
в частности, что Vue.js использует ‹templates›, которые очень близки к веб-компонентам и облегчат этот переход. в будущем, если и когда их широкая поддержка когда-либо прекратится. Я отвлекся.
Настройка
Стоит отметить, что мы используем Node v7, который поддерживает большую часть ES5 и большую часть синтаксиса
ES6, с добавлением BabelJS, чтобы заполнить пробелы.
Коа
Я всегда начинаю свои проекты Koa с нескольких базовых модулей: koa (duh),
koa-router и koa-static. `koa-static` позволяет вам указать и обслуживать один или несколько каталогов в качестве статических ресурсов - необходимость. koa-router обычно обрабатывает маршруты приложений; то есть разные конечные точки для вашего приложения. Код довольно прост, вот базовый файл `app.js`:
‘use strict’;
import ‘colors’;
import Koa from ‘koa’;
import serve from ‘koa-static’;
const app = new Koa(),
port = 3000;
app
.use(serve(`${__dirname}/public`))
.listen(port, () => {
console.log(‘Server Started ∹’.green, ‘http://localhost:'.grey + port.toString().blue);
});
export default app;
Vue.js
Чтобы начать проект с Vue, мы использовали vue-cli. Это позволяет нам создавать стандартные приложения. Поскольку здесь мы бежим с ножницами, мы сразу же взялись за дело и выбрали самый простой шаблон.
$ vue init webpack-simple .
Это дает нам базовое (как в латте со специями из тыквы) приложение Vue, которое отображает одну страницу в index.html `с логотипом и некоторыми ссылками. При этом также создается файл App.vue, который является основным «файлом Vue» для приложения. Все это теперь находится в `src`. Это все хорошо, но что насчет созданного файла Webpack?
Войдите в Webpack
Чтобы приложение Vue работало правильно, необходимо правильно связать его. Мы используем Webpack, но есть много примеров с Browserify, если вам это нравится.
Webpack - замечательный инструмент для связывания и может выполнять множество функций. Настолько, что его можно считать полноценным инструментом для сборки. Для начала вам понадобится файл webpack.config.js:
И тогда вам понадобится сам Webpack:
$ npm install webpack -g
Вы заметите, что мы сделали несколько отличных от `webpack.config.js` вещей, помимо того, что `vue-cli` сгенерировал для нас; переместил ресурсы в assets и представил подключаемый модуль Webpack для объединения CSS в файлах Vue в один файл CSS, который будет обслуживать Koa.
Связывая это вместе
Если вы следуете нашему примеру и также используете Babel, вам понадобится файл точки входа
Node, чтобы настроить Babel для разработки. Мы назвали этот файл index.js:
require(‘babel-core/register’); require(‘babel-polyfill’); require(‘./app’);
Предполагая, что у вас есть надежный файл .babelrc и ваши зависимости настроены правильно,
вы готовы попробовать запустить этого зверя. Сначала запустите Webpack и создайте свои
пакеты:
$ webpack
Если все прошло успешно, можно запустить сервер:
$ node index
И в консоли вы должны увидеть что-то вроде этого:
→ node index Server Started ∹ http://localhost:3000
Нажмите на этот адрес в своем браузере, и вы должны увидеть демонстрационное приложение Vue. Как вам эти яблоки? Я люблю их.
Бег с мачете
Мы победили ножницы, давайте будем глупыми и побегаем с чем-то большим и острым - в следующем посте я расскажу об использовании промежуточного программного обеспечения с Koa2, чтобы обеспечить живую разработку и горячую перезагрузку модулей. Это означает, что вам не нужно перезапускать сервер, чтобы восстановить пакеты, и вы увидите изменения почти мгновенно.
Круто, правда?
Ваше здоровье!
Первоначально опубликовано на shellscape.org 3 ноября 2016 г.
