Vue.js — создайте свой первый пакет и опубликуйте его на NPM

Vue.js
Vue.js — создайте свой первый пакет и опубликуйте его на NPM

В этой статье мы узнаем, как создать плагин vue и распространить его в npm, чтобы другие могли установить и использовать файлы .

Плагины значительно повышают эффективность разработки разработчиков. Большинство наших проектов полагаются на них из-за их способности выпускать новые функции с головокружительной скоростью.

Как указано в официальной документации Vue.js, количество плагинов не ограничено. Обычно мы хотим добиться следующих пяти функций:

  • Добавьте глобальные методы или свойства (например:vue-custom-element)
  • Добавьте глобальные ресурсы: директивы/фильтры/переходы и т. д. (например:vue-touch)
  • Добавьте некоторые параметры компонента с помощью глобальных методов миксина (например:vue-router)
  • Добавьте методы экземпляра Vue, добавив их в Vue.prototype (например:vue-axios)
  • Библиотека, которая предоставляет собственный API, предоставляя при этом одну или несколько функций, упомянутых выше (например:vue-router)

Хорошо, теперь вы понимаете, что такое плагин vue и какие потребности он может удовлетворить!

Как использовать плагин проекта vue

пройти черезnpm installилиyarn addПосле установки плагина вам нужно импортировать его в свой файл main.js и вызватьVue.use（）глобальный метод.

Примечание. Все плагины должны быть созданы перед вызовом new Vue().

import Vue from "vue";
import MyPlugin from "myplugin";

Vue.use(MyPlugin);

new Vue({
// [...]
})

Если пакет подключаемого модуля поддерживает ссылку cdn, на него также можно ссылаться следующими способами:

<script src="https://cdn.xxx.cn/npm/myplugin@latest/dist/myplugin.min.js"></script>

Кроме того, когда вы вызываете Vue.use() и хотите выполнить некоторую пользовательскую настройку для плагина, вы можете сделать это:

Vue.use(MyPlugin, {
 option1: false,
 option2: true
})

Например, при внедрении популярныхElement UIбиблиотека, она поддерживает передачу объекта глобальной конфигурации

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element, {
  // size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）
  size: 'small', 
  zIndex: 3000
});

А теперь к делу! Начните создавать свой первый плагин vue 💪

сделать классный компонент кнопки

Как начинающий фронтенд, я считаю, что когда вы разрабатываете проекты в своей компании, вы обязательно подумаете: «Если у компании есть собственный набор библиотек компонентов пользовательского интерфейса, это должно быть здорово!». Если у вас есть эта идея, то после того, как вы внимательно прочитаете эту статью, она принесет вам много вдохновения и вдохновения.

Шаг 1: Инициализируйте структуру каталогов плагинов

Сначала создайте пустую папку проекта, назовите ее произвольно, а затем инициализируйте генерациюpackage.jsonфайл (содержимое файла будет представлено позже)

$ mkdir ku-button && cd ku-button
$ npm init
# 上面这个命令会提示一些问题，一直回车就行，然后最后会创建一个package.json文件

Затем в корневом каталоге проекта создайтеsrcпапку, создайте новуюKuButton.vueкомпонент, здесь вы даже можете передать vuevue serveа такжеvue buildКомандная строка для быстрого создания прототипа одного файла *.vue, но предполагается, что сначала необходимо установить дополнительное глобальное расширение.

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

После завершения установки при успешном выполнении следующей командной строки:

$ vue serve KuButton.vue

можно получить прямо в браузереhttp://localhost:8080/

Чтобы узнать больше о быстром прототипировании vue, вы можете проверитьофициальная документация

Далее начинаем улучшатьButtonКод компонента кнопки, пусть работает!

Шаг 2. Уточните код компонента, чтобы сделать кнопку настраиваемой

Здесь я буду подражатьElementUI库изКомпонент кнопки, чтобы показать свои чудеса всем!

Шаблон Шаблон
<template>
  <button
      :class="[
           'ku-button',
           'ku-button--' + type,
           'ku-button--' + size,
           {
            'ku-button--round': round
           }
          ]"
      @click="onClick">
    <slot></slot>
  </button>
</template>
JavaScript
<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'default',
        validator(type) {
          return ['default', 'primary', 'info', 'warning', 'danger'].includes(type)
        }
      },
      round: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: "medium",
        validator(size) {
          return ["medium", "small", "mini"].includes(size)
        }
      },
    },

    methods: {
      onClick(event) {
        this.$emit("click", event);
      }
    }
  };
</script>
стиль
<style>
  .ku-button {
    display: inline-block;
    outline: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    user-select: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
  }

  /*颜色*/
  .ku-button--default {
  }

  .ku-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .ku-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }

  .ku-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399;
  }

  .ku-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
  }

  .ku-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
  }

  /*大小*/
  .ku-button--medium {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
  }

  .ku-button--small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  .ku-button--mini {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  /*是否圆角*/
  .ku-button--round {
    border-radius: 20px;
  }
</style>

Затем мы можем использовать его следующим образом:

<ku-button type="success" size="mini" round>小按钮</ku-button>

Хотя я упростил шаблон кнопки, вот несколько важных моментов обучения:

  • Используется спецификация БЭМ. (Для получения дополнительной информации о БЭМ см.проверить здесь)
  • Получите 3 параметра (тип кнопки, размер кнопки, закругленная кнопка или нет) через конфигурацию реквизита, чтобы пользователи могли переключать кнопки с разными темами в любое время.
  • Слот слота используется, поэтому мы можем использовать текст кнопки, как этот
  • Определяет событие @click, которое запускает $emit при щелчке компонента.

Шаг 3: Напишите метод установки

Статья, упомянутая ранееVue.use()метод, при вызове он будет выполнятьсяinstallметод, первый параметр этого метода — конструктор Vue, а второй параметр — необязательный объект параметров.

Ниже мыsrcсоздатьindex.jsфайл, а затем пропишите в нем:

import KuButton from "./KuButton.vue"

export default {
  install(Vue, options) {
    // 注册全局组件
    // https://cn.vuejs.org/v2/guide/components-registration.html
    Vue.component("ku-button", KuButton)
  }
}

На данный момент, полный плагин почти готов! 👏

Шаг 4. Заполните файл package.json в корневом каталоге.

только что открылnpm initСоздан файл package.json

{
  "private": false,
  "name": "ku-button",
  "version": "1.0.0",
  "description": "A niubility button",
  "author": "sugars",
  "license": "MIT",
  "main": "./dist/index.umd.js",
  "scripts": {
    "dev": "vue serve KuButton.vue"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "bili": "^4.7.3",
    "rollup-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

проиллюстрировать:

  • privateКогда свойство имеет значение false, это означает, что ваш пакет не является приватным, каждый может его просмотреть и использовать npm install.
  • nameАтрибут относится к имени пакета, когда он впоследствии публикуется в npm, убедитесь, что имя вашего пакета не зарегистрировано.
  • versionАтрибут относится к номеру версии пакета, и вам необходимо увеличивать номер версии каждый раз, когда вы публикуете обновление в npm. вы можете увидеть большеСемантический номер версиизнание
  • descriptionАтрибут относится к информации описания пакета. Пишите его так, чтобы все знали, для чего нужен ваш пакет.
  • mainАтрибут указывает файл входа для загрузки пакета, и require('moduleName') загрузит этот файл. Значение этого поля по умолчанию — index.js в корневом каталоге модуля.
  • scriptsАтрибут указывает аббревиатуру командной строки npm для запуска команды скрипта.Например, build указывает команду, которая будет выполняться при запуске npm run build.
  • filesВ атрибутах можно указать, какие файлы нужно публиковать в npm, например, здесь указываются все файлы в папке dist

ты сможешьофициальная документация нпмувидеть больше оpackage.jsonзнание

Пакет

Инструмент упаковки, который я использую здесь,Bili, мощный, быстрый инструмент для создания пакетов с нулевой конфигурацией.

Начните установку инструмента упаковки:

$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler

Затем создайтеbili.config.jsФайл конфигурации, конфигурация выглядит следующим образом:

module.exports = {
  banner: true,
  output: {
    extractCSS: false,
    format: ['umd'],
    moduleName: 'KuButton'
  },
  plugins: {
    vue: true
  }
}

После завершения вам нужно только выполнить команду для завершения упаковки, это так просто:

$ bili

После успешной установки пакета в корневом каталоге проекта будет создан файлdistпапка, естьindex.umd.jsдокумент

Поделитесь своей работой на npm

На этом этапе ваш плагин vue разработан. Остался последний шагnpmjsОпубликуйте свой плагин на ! Но предпосылка в том, что вам нужно иметь учетную запись npmjs, если нет, вам нужно перейти нарегистрВо-первых, вы можете пропустить этот шаг, если он у вас есть.

Откройте терминал и введите:

$ npm login 
// 回车后，输入你注册npmjs时填写的用户名，密码和邮箱
// 登录成功后，会提示：Logged in as <username> on https://registry.npmjs.org/.

Проверьте текущий статус входа пользователя npm:

$ npm whoami
// 如果登录成功，输出的是登录的用户名

Убедившись, что все вышеперечисленные шаги выполнены правильно, введите только что выполненныйku-buttonКаталог проекта, начните публикацию:

$ npm publish

После успешного выполнения ваш плагин официально выпущен! ! 🎉

Если вы хотите обновить плагин позже, вам нужно только добавитьpackage.jsonвнутреннийversionномер версии, затем выполнить сноваnpm publishОпубликовать обновление и все!

Недавно выпущенный плагин используется в проекте

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

$ npm install --save ku-button
或者
$ yarn add ku-button

Далее, вmain.jsЦитировать:

import KuButton from "ku-button"
import Vue from "vue"

Vue.use(KuButton)

Наконец, на вашей странице вот так:

<ku-button round type="success" size="small">真酷！!</ku-button>

прикреплятьадрес гитхаба

Это заканчивается здесь! Не забудьте поставить лайк! 👍

При перепечатке этой статьи просьба указывать автора и источник статьи!

Категории