Научит вас создавать библиотеку компонентов Vue по запросу.

Vue.js

Принцип загрузки по требованию

Загрузка по запросу, по сути, размещение различных компонентов библиотеки компонентов.разбить на разные файлы, ссылайтесь на соответствующий файл по мере необходимости, и файл предоставляетметод установки, используемый Vue.use. Например: я просто хочу сослаться на компонент Button в библиотеке элементов.

import Button from 'element-ui/lib/Button.js'
import Button from 'element-ui/lib/theme-chalk/Button.css'

Vue.use(Button);

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

Первый взглядelementКак это сделать, официальные «быстрые руки»:

image

element использует плагин babel, который используется для преобразования кода:

import { Button } from 'components'

// 转换为

var button = require('components/lib/button')
require('components/lib/button/style.css')

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

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

Спецификация написания кода компонента

Создаем папку packages в корневом каталоге проекта, а ниже помещаем наши компоненты:

image

Каждая папка в пакетах соответствует ресурсам, необходимым компоненту, а метод установки компонента определяется в index.js. И packages/index.js хранит метод установки, используемый при полной загрузке.

packages/Button/index.js:
import Button from './src/main';

Button.install = function(Vue) {
  Vue.component(Button.name, Button);
};

export default Button;
packages/Button/src/main.vue:
<template>
  <div>
    我是一个Button组件
  </div>
</template>
packages/index.js:
import Button from './Button';
import Loading from './Loading';
import LoadMore from './LoadMore';

const components = [
  Button,
  LoadMore,
  Loading
];

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install, // 全量引入
  Button,
  LoadMore,
  Loading
};

конфигурация веб-пакета

Код компонента написан, а затем вам нужно настроить логику упаковки webpack. Мы повторно используем шаблон, сгенерированный vue-cli, и вносим в него некоторые необходимые изменения:

многократный

Каждый компонент генерирует соответствующие js и css независимо, что требует от нас определения ссылки компонента на входе:

webpack.prod.conf.js:
const entrys = {
    Button: path.resolve(__dirname, '../packages/Button'),
    index: path.resolve(__dirname, '../packages')
};

const webpackConfig = merge(baseWebpackConfig, {
  entry: entrys,
  // ......
});

Каждый дополнительный компонент вышеуказанной конфигурации должен изменить записи, мы можем оптимизировать его, чтобы сделать егоДинамическая генерация:

webpack.prod.conf.js:
const entrys = require(./getComponents.js)([组件目录入口]);
const webpackConfig = merge(baseWebpackConfig, {
  entry: entrys,
  ......
});
getComponents.js:
const fs = require('fs');
const path = require('path');

/**
 * 判断刚路径是否含有index.js
 * @param {String} dir 
 */
function hasIndexJs(dir) {
    let dirs = [];
    try {
        dirs = fs.readdirSync(dir);
    } catch(e) {
        dirs = null;
    }
    return dirs && dirs.includes('index.js');
}

/**
 * 获取指定入口和入口下包含index.js的文件夹的路径
 * @param {String} entryDir 
 */
const getPath = function(entryDir) {
    let dirs = fs.readdirSync(entryDir);
    
    const result = {
        index: entryDir
    };
    dirs = dirs.filter(dir => {
        return hasIndexJs(path.resolve(entryDir, dir));
    }).forEach(dir => {
        result[dir] = path.resolve(entryDir, dir); 
    });
    return result;
}

module.exports = getPath;
Изменить вывод веб-пакета

Сгенерированный по умолчанию файл js не поддерживает импорт ES6, здесь мы устанавливаем его какumd

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('[name].js'),
    library: 'LoadOnDemand',
    libraryTarget: 'umd'
},

настроить компонент-плагин-бабеля -D

После того, как указанная выше библиотека компонентов упакована и опубликована на npm. Когда мы используем npm install babel-plugin-component -D, измените .babelrc.js:

"plugins": [
    [
      "component",
      {
        "libraryName": "load-on-demand", // 组件库的名字
        "camel2Dash": false, // 是否把驼峰转换成xx-xx的写法
        "styleLibrary": {
          "base": false, // 是否每个组件都默认引用base.css
          "name": "theme" // css目录的名字
        }
      }
    ]
  ],

Вот свойстваcamel2Dash, включен по умолчанию.Если имя вашего компонента vueComponent в открытом состоянии, указанный файл css станет vue-component.css.

Эпилог

Код демо выше выложен на личном гитхабеGitHub.com/Feather Letter16449196…Если у вас есть лучший метод реализации, или если у меня есть какие-то ошибки, которые нужно исправить, добро пожаловать в общение.

Чтобы узнать больше о передовых технологиях, подпишитесь на общедоступную учетную запись WeChat «Круг обмена передовыми технологиями сухих товаров».
Категории