Библиотека компонентов Vue 3

Мы будем использовать vuejs3, postcss и rollup для создания нашего проекта.

Проект vue3 можно создать с помощью vue-cli:

vue create projectName

После того, как мы завершим все шаги, создадим наш проект. каталог нашего проекта будет выглядеть примерно так

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

# src/index.ts
import * as components from "./components/index"

const install = (instance) => {
    for (let componentKey in components) {
        instance.use((components)[componentKey])
    }
}

export default install

export * from './components'

В приведенном выше коде мы импортируем все компоненты из папки компонентов и регистрируем их здесь с помощью функции установки. Также все компоненты экспортируются, чтобы мы могли зарегистрировать их с помощью Vue.component().

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

# components/index.js
import HelloWorld from "./helloworld";
import TestWorld from "./testworld";

export { HelloWorld, TestWorld };

Давайте посмотрим на нашу папку компонентов, у нас будет папка для каждого компонента с файлом .vue, файлом .css и файлом index.js. Наша папка компонентов будет выглядеть примерно так

Содержимое index.js будет следующим:

import HelloWorld from "./HelloWorld.vue";

import { registerComponent } from "./../../utils/plugins/index";

const Plugin = {
  install(vue) {
    registerComponent(vue, HelloWorld);
  }
};

export default Plugin;

export { HelloWorld };

Это просто для использования каждого компонента в качестве плагина в нашей сборке UMD/IIFE отдельно, каждый index.js будет действовать как точка входа в нашей конфигурации свертки.

Мы создадим папку util, внутри которой будет код plugin/index.js, это поможет установить глобальные свойства и зарегистрировать наш компонент.

# utils/plugins/index.js
export const registerComponent = (instance, component) => {
    instance.component(component.name, component)
}

export const registerComponentProgrammatic = (instance, property, component) => {
    if (!instance.config.globalProperties.$test) instance.config.globalProperties.$test = {}
    instance.config.globalProperties.$test[property] = component
}

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

Теперь мы добавим postcss в наш проект, чтобы мы могли использовать его плагины. давайте установим несколько плагинов postcss

yarn add -D [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

После этого мы можем настроить наш postcss.config.js.

const path = require('path');
module.exports = {
    plugins: {
      "postcss-import": {
        resolve(id, basedir){
           // resolve alias @css, @import '@css/style.css'
            // because @css/ has 5 chars
            if (id.startsWith('@css')) {
              return path.resolve('./src/assets/styles/css', id.slice(5));
            }

            // resolve node_modules, @import '~normalize.css/normalize.css'
            // similar to how css-loader's handling of node_modules
            if (id.startsWith('~')) {
              return path.resolve('./node_modules', id.slice(1));
            }

            // resolve relative path, @import './components/style.css'
            return path.resolve(basedir, id);
        }
      },
      "postcss-simple-vars": {},
      "postcss-nested": {},
      "postcss-url": {},
      autoprefixer: {
        overrideBrowserslist: "> 1%, IE 6, Explorer >= 10, Safari >= 7"
      }
    }
}

Теперь мы можем писать css в наших файлах .css и импортировать их в файлы .vue нашего компонента. Мы добавим файл main.css в нашу папку с ресурсами, в которой будут переменные css.

# assets/styles/css/main.css
$red: red;
$yellow: yellow;
$blue: blue;
$green: green;
# components/HelloWorld.vue
<style lang="css" scoped>
@import "./helloworld.css";
</style>
# components/helloworld.css
@import "@css/main.css";

.highlight1 {
    color: $red;
}

.imgtest {
  background-image: url("../../assets/img/icons/star-half.svg");
  background-size: 100%;
  width: 100px;
  height: 100px;
}

Теперь мы можем использовать функции импорта postcss, vars и вложенности. Мы можем приступить к разработке наших компонентов с помощью css, скомпилированного postcss. С этой настройкой наш проект будет выглядеть так:

Весь обновленный код для этой статьи доступен на github

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

Библиотека компонентов Vue 3

Похожие вопросы