Рубрики
Без рубрики

Создание библиотеки компонентов Vue.js: Часть II – структура

Обзор в этом посте мы пройдемся через первоначальную структуру проекта для вашего Vue Compo … Tagged с Vue, Library, Plagin, JavaScript.

Обзор

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

Vue Project Structure

Давайте прыгнем прямо в. Мы собираемся использовать Vue Cli 3 Анкет Бей!

К счастью, много Однажды был Шаги конфигурации теперь обрабатываются CLI, в основном в отношении WebPack. Это не значит, что вам в конечном итоге не понадобится Изменить конфигурацию WebPack с vue.config.js Но вы будете удивлены, как далеко вы можете зайти, не делая этого. Я стараюсь не изменять общие настройки WebPack, если это возможно 🙏. Помните, что вам захочется попытаться снизить барьеры для ввода понимания для других разработчиков, чтобы они могли понять ваш выбор дизайна. Не только для использования, но и для отладки (что, вероятно, более вероятно, TBH).

Имея это в виду, создайте свой каркас проекта VUE, используя CLI.

vue create vue-component-library

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

🎉  Successfully created project vue-component-library.
👉  Get started with the following commands:

 $ cd vue-component-library
 $ yarn serve

При запросе во время инициализации проекта я выбираю приведенные ниже варианты:

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

Обязательно настройте эти варианты в будущем, если ваши предпочтения изменятся. Vue CLI поставляется в комплекте с изящным GUI Это позволяет легко добавлять и удалять плагины.

Vue-Component-Library является названием проекта библиотеки компонентов (папка и т. Д.). Это не нужно быть таким же, как программное представление библиотеки. Мы пойдем в это в предстоящем плагин Пост сериала.

По умолчанию CLI создаст SRC/Компоненты каталог. Я консолидирую этот каталог проекта и проект, удалив неиспользованные элементы, такие как App.vue , ресурсы/favicon.ico , так далее. Начальная структура обычно используется в качестве базовой линии приложения. Для типичного веб-приложения я оставляю настройку как есть. Вместо этого мы будем использовать Vuepress для функциональности сайта документации.

Далее мы:

  1. Удалите public каталог
  2. Удалить SRC/активы
  3. Удалить Компоненты/Helloworld.vue
  4. Удалить src/app.vue

Изменения каталога различаются в макете ниже.

  .
- ├── public/
  ├── src/
- │   ├─ assets/
  │   └─ components/
- │      └─ HelloWorld.vue
- └─ App.vue

Ты заставляешь думать … Мы только что удалили весь проект? Неа! CLI добавляет к вашему проекту огромное количество функциональности, кроме макета файла. Примечание, Vue-Cli-Service и соответствующий DevDependencies в сгенерированном Package.json Анкет

Рассмотрим использование вышеуказанной структуры представления в качестве приложения пользовательского VUE или Изгнание вашей темы Vuepress Если вы хотите меньше ограждений.

{
  "name": "vue-component-library",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

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

Структура каталога компонентов

Для каждого компонента я создаю три файла в именованном каталоге компонентов в SRC/Компоненты Анкет

Общий вид структуры каталога:

.
└─ src/
  └─ components/
    └─ /
      ├─ .vue
      ├─ .spec.js
      └─ index.js

Теперь вместо этого для гипотетического Кнопка составная часть:

.
└─ src/
  └─ components/
    └─ Button/
      ├─ Button.vue
      ├─ Button.spec.js
      └─ index.js
  • <Компонент> .vue

Содержит единый компонент (SFC).

  • index.js

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

  • < Компонент> .spec.js

Где будут прожить тесты компонентов. Если тесты создают снимок, то __snapshots__ каталог будет создан в этом каталоге.

Итак, для каждого из файлов давайте создадим заполнителя.

<Компонент> .vue

Компоненты не должны в конечном итоге полностью автономны (Template + Script + Style) Но мне нравится начинать с этого подхода. При необходимости я рефактор, поскольку библиотека растет в размерах или сложности. Есть много мнений о Стили с JS или CSS в JS . Мне нравится начинать с обычных стилей SFC + Scoped и оттуда.

Обратите внимание, что компонент имеет имя Анкет Это очень важно и повлияет на нашу регистрацию библиотеки как плагин за несколько шагов. Компоненты зарегистрированы и упоминаются имя атрибут. Попробуйте использовать идентификатор, который не будет столкнуться с другими зависимостями или тегами проекта.

index.js

import Button from './Button.vue'

export default Button

< Компонент> .spec.js

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

Экспорт компонентов

Внутри SRC каталог, создайте другой index.js Файл для экспорта компонента (ов). Этот файл будет располагаться рядом с верхним уровнем /составные части каталог, как ниже.

 .
 └─ src/
   ├─ components/
   │  └─ ...
+  └─ index.js

В этом файле мы импортируем и экспортируем компоненты из этого файла.

// index.js
export { default as Button } from './Button'

Этот шаблон может показаться немного повторяющимся, но он обеспечивает гибкость в библиотеке. Промежуточный index.js Файл консолидирует компоненты, которые будут импортироваться в качестве однострочного в файле точки входа, main.js Анкет

Более одного компонента может жить в одном и том же <Компонент> каталог. Например, это может иметь смысл группировать компоненты логическим образом, основанную на шаблоне использования (т.е. и ) Если это так, отрегулируйте приведенные выше файлы, чтобы отразить:

// src/components
import List from './List.vue'
import ListItem from './ListItem.vue'

export default { List, ListItem }

И на один уровень выше:

// src/index.js
export { List, ListItem } from './ListComponents'

Фонд теперь должен добавить в документацию часть библиотеки 📖. Но сначала мы объединим компоненты в плагин! Мы доберемся до этого.

Оригинал: “https://dev.to/siegerts/creating-a-vue-js-component-library-part-ii-structure-iph”

Читайте ещё по теме: