Подготовка проекта

Мы будем разрабатывать наш компонент используя webpack. Настраивать webpack вручную - та еще задача, но к счастью разработчики Vue придумали одну очень полезную утилиту. Она называется vue-cli. Давайте установим её глобально.

npm install -g vue-cli

С помощью vue-cli мы можем легко сгенерировать шаблон нового проекта на Vue.js с webpack, настроенного под наши нужды, чтобы мы могли сразу заняться непосредственно разработкой. Выполните следующую команду в терминале и следуйте инструкциям:

vue init webpack-simple vue-counter

Наш новый новый проект Vue создан по шаблону webpack-simple. Есть и более продвинутый шаблон с webpack - webpack. В нем есть дополнительные вещи, которые не понадобятся нам в нашем уроке. Зайдите в только что сгенерированную папку и установите все npm зависимости:

cd vue-counter
npm install

Если вы никогда не работали с webpack, знайте, что его основная функция - собирать множество JavaScript модулей/библиотек в одиночный файл. JavaScript модули не поддерживаются (или не поддерживались, в зависимости от того, когда вы это читаете) (всеми) браузерами. Помимо того, webpack выполняет разные операции над модулями в зависимости от подключенных плагинов прежде, чем собрать их все в один файл. Например, webpack может преобразовать код ES6 в ES5 для поддержки более старыми браузерами, минифицировать код, и т.п.

Так как мы используем готовый шаблон, вам не следует забивать себе голову всем этим. Важно отметить, что есть две команды для сборки модулей: npm run dev и npm run build. Первая запускает локальный веб сервер для разработки с функцией горячей перезагрузки (Hot Module Reloading, HMR) и пересобирает проект каждый раз, когда вы редактируете и сохраняете какой-либо файл. Вторая делает финальную сборку проекта с минификацией.

Начало разработки

Пришло время начать разработку нашего Vue компонента. Мы будем работать в папке src/. Давайте удалим компонент по-умолчанию из папки - файл App.vue и связанную папку assets/. После этого создадим свой компонент src/Counter.vue со следующим кодом:

<template>
    <div>Hello World!</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Пока что это пустой компонент, который просто выводит текст Hello World!. Теперь откройте файл src/main.js и отредактируйте его следующим образом:

import Vue from 'vue'
import Counter from './Counter.vue'

Vue.component('counter', Counter);

new Vue({
  el: '#app'
})

export default Counter;

Здесь мы просто импортируем наш компонент и регистрируем его глобально во Vue под именем <counter>, а затем экспортируем его. Благодаря экспортированию пользователи нашего пакета смогут использовать компонент так же, как и мы сейчас, а именно:

import Counter from './Counter.vue'

Vue.component('counter', Counter);

Обратите внимание, что мы также удалили поле render из объекта Vue, поскольку мы не собираемся отображать компонент в качестве всей страницы. Теперь откройте файл index.html - это тот файл, который используется локальным сервером разработки для отображения результата нашей работы (такая своеобразная страница для демонстрации компонента). Мы будем работать с нашим компонентом так, как будут с ним работать пользователи нашего компонента, а именно добавив компонент в HTML код страницы в div #app:

...
<div id="app">
    <counter></counter>
</div>
...

Выполните команду npm run dev - будет запущен локальный сервер и откроется новая вкладка в вашем браузере. Вы должны увидеть пустую страницу с текстом Hello World! наверху.

Пишем код компонента

Теперь можно приступить непосредственно к разработке компонента в файле src/Counter.vue. Этот урок не о том, как программировать на Vue.js, поэтому я просто приведу финальный код нашего учебного компонента. Вот он:

<template>
    <div>
        <p>Текущее значение счетчика: {{ count }}</p>

        <p>
            <button @click="count++">Увеличить на один</button>
            <button @click="count = 0">Сброс</button>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    }
}
</script>

Перед публикацией

Прежде, чем мы сможем опубликовать наш компонент, нам нужно сделать несколько дополнительных действий. Сейчас у нас на руках Vue-приложение и в нем есть код, который нужно удалить для того, чтобы проект можно было использовать в качестве модуля/пакета.

Для начала откройте файл package.json и добавьте куда-нибудь следующий атрибут:

"main": "src/main.js",

Это входная точка вашего пакета. Без этой строчки есть вероятность, что ваш пакет не заработает внутри чьего-либо проекта (есть шанс получить ошибку типа "Can't resolve ..."). Далее, откройте файл .babelrc и замените его содержимое на это:

{
  "presets": [
    ["env", { "modules": false }]
  ]
}

Файл index.html используется для тестирования компонента в момент разработки (по-крайней мере в нашем случае). Если вы хотите оставить этот файл для последующей разработки, откройте его и замените id div'а <div id="app"> на что-нибудь уникальное, дабы избежать возможных конфликтов с id других элементов.

Наконец, откройте файл src/main.js. Мы будем инициализировать Vue только в том случае, если элемент с нашим уникальным id был найден на странице.

import Vue from 'vue'
import Counter from './Counter.vue'

if (document.querySelector('#наш-строго-уникальный-id'))
{
    Vue.component('counter', Counter);

    new Vue({
        el: '#наш-строго-уникальный-id'
    });
}

export default Counter;

Если вы решите удалить файл index.html, то весь src/main.js будет выглядеть следующим образом:

export Counter from './Counter.vue'

Публикация npm пакета

Когда с разработкой закончено, пришло время разместить компонент онлайн. Зайдите на npmjs.com и зарегистрируйте аккаунт. Затем в своем терминале выполните npm login и введите данные аккаунта npm. Как вариант можно сразу выполнить команду npm adduser, которая одновременно создаст аккаунт и сохранит его данные на вашей машине.

Теперь откройте файл package.json и посмотрите на атрибут name. Попробуйте найти пакет с таким именем на npmjs.com. Убедитесь, что ваше имя уникально, иначе опубликовать пакет вам не удастся. Если имя уже занято, вы можете либо поменять его, либо добавить имя пользователя npm в качестве пространства имен, например @username/vue-counter.

Затем удалите строчку "private": true,.

Если вы загружали свой проект на GitHub - дайте npm знать о вашем репозитории, добавив строчку "repository": "https://github.com/ваш-логин/ваш-репозиторий".

Наконец, когда все готово, выполните команду npm publish. Готово! Ваш пакет опубликован в репозитории npm. Каждый раз, когда вы вносите изменения в ваш пакет, вам нужно инкрементировать его версию в файле package.json (например, заменить "1.0.0" на "1.0.1") и снова выполнить npm publish в терминале.