Vue компоненты упакованы и выпустили весь процесс NPM

Vue.js
Vue компоненты упакованы и выпустили весь процесс NPM

Компонент Vue публикует весь процесс npm

Запишите процесс выпуска компонента, см.Режим библиотеки Vue cli3 для сборки библиотеки компонентов и публикации npm

Начало

Во-первых, мы создаем проект vue с нуля с помощью vue-cli3.

vue create my-project

Это выглядит так:

настроить каталог

После установки проекта изменим структуру каталогов

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...
.

После модификации мы обнаружим ошибку при запуске проекта, это связано с тем, что структура каталогов была изменена, а папка packges добавлена ​​нами, вебпак не может ее получить и скомпилировать, нам нужно добавить ее в вебпак.

Мы создадим новый файл конфигурации Vue.config.js, дополнительный файл конфигурации, предоставленный Vue-CLI3, в котором мы можем настроить все конфигурации WebPack в целом проект. Мы можем идти напрямуюконфигурация vue-cli3скопировать иchainWebpackдаст нам цепные операции

// vue-config.js
module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',   // 把src 修改为examples
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  /* chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 */
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(__dirname + 'packages')  // 注意这里需要绝对路径，所有要拼接__dirname
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

Выше приведена базовая конфигурация, далее приступаем к созданию компонента

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

Здесь я попробую это с компонентом кнопки. Создайте новую папку comColorButton и файл index.js в ранее созданном каталоге пакетов, а затем создайте папку src и файл index.js в папке comColorButton Структура каталога выглядит следующим образом:

|——
|——packages
|   |——index.js
|   |——comColorButton
|      |——index.js
|      |——src
|         |——color-button.vue
|——

Это содержимое color-button.vue

<!-- color-button.vue -->
<template>
  <span class="color-button">
    <button :class="[type, disabled?'disabled':'']" :disabled="disabled">
      <slot></slot>
    </button>
  </span>
</template>

<script>
export default {
  name:'ComColorButton',
  props:{
      type:{
      type:String,
      default:'primary'
    },
      disabled:{
      type:Boolean,
      default:false
    },
  }, 
  data () {
    return {

    }
  }
}
</script>

<style lang='scss'>
$pColor:#333;
$sColor:#0db677;
$wColor:orange;
$dColor:red;
$disabledColor:gray;
.color-button{
  display: inline-block;
  margin-right:10px;
  button{
    display: inline-block;
    padding:10px 20px;
    border:2px solid $pColor;
    background:#fff;
    font-size: 16px;
    width:auto;
    cursor: pointer;
    transition:all 0.5s;
    &:hover{
      box-shadow: 100px 0px 0px 0px $pColor inset;
      color:#fff;
    }
    &.success{
      border:2px solid $sColor;
      color: $sColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $sColor inset;
        color:#fff;
      }
    }
    &.warning{
      border:2px solid $wColor;
      color: $wColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $wColor inset;
        color:#fff;
      }
    }
    &.danger{
      border:2px solid $dColor;
      color: $dColor;
      &:hover{
        box-shadow: 100px 0px 0px 0px $dColor inset;
        color:#fff;
      }
    }
    &.disabled{
      border:2px solid $disabledColor;
      color: $disabledColor;
      cursor:not-allowed ;
      &:hover{
        box-shadow:none;
        color: $disabledColor;
      }
    }
  }
}
</style>

Вот index.js внутри папки comColorButton

// 导入组件，组件必须声明 name
import ComColorButton from './src/color-button.vue'

// 为组件提供 install 安装方法，供按需引入
ComColorButton.install = function (Vue) {
  Vue.component(ComColorButton.name, ComColorButton)
}

// 默认导出组件
export default ComColorButton

Вот index.js внутри папки пакетов

import ComColorButton from './comColorButton'
// 存储组件列表
const components = [
  ComColorButton
] 
/* 
  定义install 方法，接收Vue作为参数，如果使用use注册插件，则所有的组件都将被注册
*/
const install = function (Vue) {
  // 判断是否安装
  if(install.installed){return}
  // 遍历所有组件
  components.map(item => {
    Vue.component(item.name,item)
  })
}
// 判断是否引入文件
if(typeof window !== 'undefined' && window.Vue){
  install(window.Vue)
}
export default{
  install,
  ComColorButton
}

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

/* main.js */
// 导入组件库
import ComColorButton from './../packages/index'
// 注册组件库
Vue.use(ComColorButton)

Используйте библиотеку компонентов

<template>
  <div class="hello">
    <com-color-button type="success" :disabled="false">按钮</com-color-button> 
    <com-color-button :disabled="true">按钮</com-color-button>
  </div>
</template>

Мы видим эффект:

Опубликуйте npm для удобства использования прямо в проекте.

1. В package.json добавлена ​​новая команда для компиляции в библиотеку

В режиме библиотеки Vue является внешним, что означает, что даже если Vue введен в код, упакованный файл не содержит Vue.

Ниже добавляем в скрипты новую команду npm run lib

  • --target: цель сборки, по умолчанию используется режим приложения. Эта модификация включает режим библиотеки для lib.
  • --Dest: выходной каталог, по умолчанию DIST. Здесь мы меняем на lib
  • [entry]: последний параметр — это файл входа, по умолчанию — src/App.vue. Здесь мы указываем каталог скомпилированных пакетов/библиотек компонентов.
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

Выполните команду компиляции библиотеки

npm run lib

После этого мы видим, что будет сгенерирована папка lib, содержащая множество файлов, которая выглядит так:

2. Настройте поля, опубликованные в npm, в файле package.json.

  • Имя: имя пакета, которое уникально. Вы можете искать имя на официальном сайте NPM. Если он существует, вам нужно изменить имя.
  • version: номер версии. Номер версии необходимо изменять каждый раз, когда он публикуется в npm, он не может совпадать с историческим номером версии.
  • описание: описание.
  • main: входной файл, это поле должно указывать на наш окончательный скомпилированный файл пакета.
  • ключевое слово: ключевое слово с пробелами для разделения слов, которые вы хотите, чтобы пользователь наконец искал.
  • автор: автор
  • private: независимо от того, является ли он закрытым или нет, его необходимо изменить на false перед публикацией в npm.
  • лицензия: открытый протокол Ниже приведены эталонные настройки.
 "name": "com-color-button",
  "version": "0.1.3",
  "description": "基于 Vue 的按钮",
  "main": "lib/comColorButton.umd.min.js",
  "keyword": "colorButton button color",
  "private": false,

3. Добавьте файл .npmignore, чтобы игнорировать файл выпуска.

Когда мы публикуем в npm, нужно опубликовать только скомпилированный каталог lib, package.json и README.md. Поэтому нам нужно настроить игнорирование каталогов и файлов. Как и в случае с синтаксисом .gitignore, какие файлы необходимо отправить, зависит от их фактической ситуации.

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

4. Войдите в нпм

Во-первых, вам нужно зарегистрировать учетную запись на npm, и обратить внимание на подтверждение вашего адреса электронной почты, иначе он не будет опубликован позже. Если зеркало Taobao настроено, сначала установите его обратно на зеркало npm.

npm config set registry http://registry.npmjs.org

Затем выполните команду входа в систему на терминале и введите имя пользователя, пароль и адрес электронной почты для входа в систему.

npm login

5. Опубликовать в npm

Выполните команду публикации, чтобы опубликовать компонент в npm.

npm publish

Если вы не подтвердили свою электронную почту здесь, сообщите об этом, вам необходимо подтвердить ошибку электронной почты. Просто зайдите в npm, чтобы подтвердить свою электронную почту, в верхней части страницы появится всплывающее окно, в котором вам нужно подтвердить свою электронную почту.

6. Успешный релиз

Через несколько минут после успешного выпуска вы можете просмотреть пакеты своей учетной записи npm или выполнить поиск на официальном сайте npm.

Перейдите к npm, чтобы проверить, мы видим, что выпуск пакетов прошел успешно, как показано ниже:

7. Используйте недавно выпущенную библиотеку компонентов

Установить

cnpm install com-color-button -S

представлять

<!--main.js-->
import ComColorButton from 'com-color-button'
import 'com-color-button/lib/comColorButton.css'
Vue.use(ComColorButton)

используемые компоненты

...
<com-color-button type="success">按钮</com-color-button>
...

Это все закончится, и это отключение, доступно.

Категории