В этой статье я хочу показать вам, как просто создать библиотеку компонентов с помощью Vue-cli, протестировать ее локально и опубликовать на npm как пакет npm.
Прежде всего, создайте проект Vue-cli и назовите его vue-custom-checkbox:
vue create vue-custom-checkbox
Подсказка: если вы не знакомы с Vue-cli, посетите официальный веб-сайт Vue-cli.
после этого в папке components создайте новый компонент и назовите его Checkbox:
для локального теста используйте его в App.vue:
теперь наш компонент готов к внешнему использованию.
Шаг 1. Добавьте компонент в main.js
чтобы использовать наш компонент, нам нужно импортировать его в файл javascript, а затем экспортировать.
Помните, что в этом случае нам на самом деле не нужно импортировать и экспортировать компонент , но если у нас более одного компонента, мы должны выполнить эту работу, потому что нам нужно чтобы экспортировать их вместе в один файл.
Шаг 2. Добавьте основной файл пакета в package.json
каждый пакет npm должен иметь свойство main, которое должно быть импортировано в любой проект, который мы хотим использовать. другими словами, единственный файл javascript, который будет использоваться в других проектах, - это файл, который мы передаем в свойство main
если у вас есть основной файл стиля, который нужно включить, используйте свойство style
Шаг 3. Протестируйте наш пакет локально
для этого мы используем npm link, запустите эту команду в вашем пакете компонентов:
npm link
затем в целевом проекте:
npm link vue-custom-checkbox
эти две команды экспортируют наш пакет как глобальный пакет в нашу глобальную папку node_modules и добавляют его в целевой проект. поэтому мы можем использовать наш компонент в другом проекте и протестировать его функциональность локально.
Например, используйте Checkbox целевой проект компонента:
Шаг 4. Опубликуйте в npm
наконец, опубликуем наш пакет компонентов:
npm publish
