Научу разрабатывать библиотеку компонентов на основе vue с нуля до единицы

внешний интерфейс Vue.js

предисловие

Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов, и все больше и больше разработчиков изучают и используют его.Научу строить компонентную систему фронтенд-команды от 0 до 1После этого многие друзья хотят знать, как создать систему компонентов на основе vue, поэтому в качестве дополнения к этой статье эта статья обобщает, как создать библиотеку компонентов на основе vue.

Хотя автор не занимается разработкой Vue уже почти 2 года, но я уделяю внимание обновлению и развитию Vue.Автор всегда считает, что компонентизация технической команды фокусируется на построении инфраструктуры и дизайнерская идея компонентизации.Мы можем полностью Подобные проекты реализованы с использованием разных фреймворков, поэтомуВидя сущность через явление, мышление является самым важным, Эта статья в основном учит вас использовать vue-cli3 Создайте библиотеку компонентов шаг за шагом и опубликуйте ее на npm, но автор считает, что основное внимание уделяется не конкретному способу создания библиотеки компонентов, а идеям и компромиссам при разработке библиотеки компонентов.

ты получишь

  • Используйте vue-cli3 для создания библиотеки компонентов команды и публикации ее в npm.
  • Общие базовые знания о пакете npm

Релевантная информация

текст

В этой статье предполагается, что каждый имеет определенное представление о vue и знаком с настройкой vue-cli3.Во-первых, когда мы собираем библиотеку компонентов, мы должны знать, нужно ли ее собирать, если проект разовый или нет возможности повторного использования в разных проектах Если в команде много разных проектов, которые будут использовать одни и те же спецификации дизайна компонентов, то сборка библиотеки компонентов, несомненно, лучший выбор Далее непосредственно приступаем к реализации сборки библиотеки компонентов .

1. Установите vue-cli3 и создайте проект

Сначала устанавливаем необходимый набор инструментов для разработки и создаем проект:

yarn global add @vue/cli
// 创建项目
vue create vui

После того, как мы установим зависимости и войдем в службу запуска проекта, vue-cli3 автоматически покажет нам страницу по умолчанию.Что касается структуры каталогов библиотеки компонентов vue, автор ссылается на элемент для организации, и вы также можете разработать дизайн в соответствии со стилем своей команды. , Прежде всего, мы взглянем на исходную структуру каталогов:

Вносим следующие коррективы:
Мы переименовали src в examples и добавили каталог пакетов для хранения наших пользовательских компонентов. Однако по умолчанию cli запустит службу под src. Если имя каталога изменится, нам нужно вручную изменить конфигурацию. Vue-cli3 предоставляет файлы для пользовательских проектов конфигурации упаковки. Нам нужно только вручную создать vue.config.js. конкретно изменить, как показано ниже:

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
  }
}

Сначала измените адрес файла записи на main.js в примерах, а затем добавьте пакеты в задачу упаковки и компиляции.

2. Напишите код компонента

Прежде всего, давайте возьмем в качестве примера компонент Button.Здесь реализован только относительно простой компонент.Если вы хотите узнать более подробные методы и идеи проектирования компонентов, вы можете обратиться к статье автора, посвященной дизайну компонентов. Во-первых, мы сначала создаем новый каталог Button в каталоге пакетов, а затем сохраняем исходный код компонента в src:

<template>
  <div class="x-button">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'x-button',
  props: {
    type: String
  }
}
</script>

<style scoped>
  .x-button {
      display: inline-block;
      padding: 3px 6px;
      background: #000;
      color: #fff;
  }
</style>

При проектировании компонентов vue и react будет применяться большое количество механизмов слотов, таких как теги слотов в vue, дочерние элементы react и т. д., поэтому вы можете сосредоточиться на этом.Мы пишем следующий код в index.js Button, чтобы установить его как компонент vue:

// 导入组件，组件必须声明 name
import XButton from './src'

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

// 导出组件
export default XButton

Структура компонента Button выглядит следующим образом:

Далее импортируем компонент в файл входа пакетов и устанавливаем экспорт:

// 导入button组件
import XButton from './Button'

// 组件列表
const components = [
  XButton
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  XButton
}

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

3. Протестируйте код

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

// examples/main.js
import Vue from 'vue'
import App from './App.vue'

// 导入组件库
import xui from '../packages'
// 注册组件库
Vue.use(xui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Этот метод является глобальным импортом. Что касается импорта по требованию, его можно настроить по элементам. Для бизнес-компонентов он используется в общих проектах, поэтому глобальный импорт более подходит. В качестве UI-библиотеки импорт по требованию может быть более подходящее.

Далее мы можем использовать наш компонент в проекте:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <x-button type="primary">button</x-button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

Эффект следующий:

Вы также можете использовать elemnt для разработки более красивой документации.

4. Настройте файл package.json

В качестве библиотеки компонентов мы должны написать наш package.json в соответствии с правилами пакета npm.Давайте сначала решим проблему упаковки библиотеки компонентов.Во-первых, нам нужно позволить скаффолдингу скомпилировать код нашего компонента и вывести его в указанную директорию.Пакет Спецификация обычно выводится в каталог lib, и код выглядит следующим образом:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
  }

Наш сценарий lib используется для упаковки кода компонента в каталог lib, имя файла начинается с префикса name -name, указанного имени, и мы выполняем сценарии для вывода, аналогичные следующему коду:

Далее нам нужно написать описание, ключевые слова и т. д. файла пакета следующим образом:

  • description Текст описания библиотеки компонентов
  • ключевые слова Ключевые слова библиотеки компонентов
  • лицензионное соглашение
  • репозиторий Адрес репозитория git, связанный с библиотекой компонентов.
  • Адрес домашней страницы, отображаемый библиотекой компонентов домашней страницы
  • main Основной адрес входа в библиотеку компонентов (адрес, введенный при использовании компонента)
  • Библиотека компонентов частного заявления о конфиденциальности, если вы хотите опубликовать общедоступный онлайн npm, необходимо удалить свойство или установить значение false
  • publishConfig используется для установки адреса, опубликованного npm.Эта конфигурация очень важна, так как сервер npm внутри команды и может быть установлен как частный репозиторий npm.

Есть еще много конфигураций, которые зависят от требований и спецификаций команды, поэтому я не буду приводить здесь примеры.Исходный код конкретной конфигурации можно найти по адресуxui.

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

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

// 本地编译组件库代码
yarn lib
// 登录
 npm login
 // 发布
 npm publish
 // 如果发布失败提示权限问题,请执行以下命令
 npm publish --access public

После публикации эффект следующий:

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

import vui from '@alex_xu/vui'
import '/@alex_xu/vui/lib/vui.css'
Vue.use(vui)

Автор кратко упоминает здесь знания, связанные с npm, на которые вы можете ссылаться и учиться.

1. Файл конфигурации .npmignore

Конфигурационный файл .npmignore аналогичен файлу .gitignore, если .npmignore отсутствует, вместо его функции будет использоваться .gitignore.

2. Управление версиями пакетов npm

Распределение пакетов npm соответствует семантической версии. Формат номера версии следующий: Major.Minor.Patch. Каждая часть подробно описывается следующим образом:

  • Major Указывает основной номер версии, который необходимо обновить при внесении несовместимых изменений API.
  • Второстепенная версия указывает второстепенный номер версии, который необходимо обновить, когда предъявляются функциональные требования к обратной совместимости.
  • Патч означает пересмотр, выполнение обновлений при исправлении проблемы, совместимой с предыдущими версиями.

Соответствующий npm также предоставляет сценарии, помогающие нам автоматически обновлять номер версии, как показано ниже:

npm version patch
npm version minor
npm version major

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

Наконец

Позже я потрачу много времени на выводузлы и аспекты визуализации данныхДля обзора интервью, я надеюсь, что автор напишет больше вопросов интервью для того, что многие друзья сказали. Автор ранее сказал, что статей, связанных с интервью, больше не будет. Я надеюсь, что всеСосредоточьтесь больше на осаждении и накоплении самой технологии, обратите внимание на структуру и глубину технологии. У автора ограниченное время, спасибо за понимание~

Если вы хотите получитьБольше полного исходного кода проектаили хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории