OSCHINA-MIRROR/ereddate2017-vue-easy-loader

Vue-easy-loader

Введение

Vue-easy-loader — это инструмент для программируемой загрузки компонентов, который позволяет динамически загружать модули, компоненты и другие ресурсы в приложениях на Vue. Он поддерживает загрузку локальных скриптов JavaScript, стилей, файлов LESS и изображений, а также удалённых файлов.

Vue-easy-loader подходит для быстрой разработки и итераций в проектах на Vue, где требуется динамическая загрузка модулей, динамических маршрутов и связанных компонентов с коротким сроком жизни.

Зависимости

Для работы с vue-easy-loader необходимо установить следующие зависимости:

Vue;
axios;
less.

Необходимо импортировать указанные выше зависимости.

Easy.set({
  alias: {
    vue: "https://cdn.jsdelivr.net/npm/vue/dist/vue.js",
    axios: "https://unpkg.com/axios/dist/axios.min.js",
    less:
      "https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js",
    babel:"https://cdn.bootcdn.net/ajax/libs/babel-core/6.1.19/browser.min.js" //Если используется es6 синтаксис, то необходимо импортировать babel
  }
})

Использование easy-loader

<script src="easy-loader.js"></script>
<script src="main.js"></script>

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

<script src="easy-loader.js" data-main="main.js" id="easyroot"></script>

В файле main.js определяется использование easy-loader:

define(require => {
    Easy.set({
        base:"./",
        alias:{
            test:"js/xxx/test.js",
            vueComponent:"vue/xxx/vueComponent.vue"
        }
    }).use("test vueComponent", (v) => {
        Promise.all([
            require("test").component,
            require("vueComponent").component
        ]).then(v => {
            console.log(v[0]);
            v[1].getStyle();  //Содержимое файла vue в формате LESS преобразуется в CSS и вставляется в тег style в head
            console.log(v[1]);
        })
    });
});

Код файла test.js:

define("test", (require, exports, module) => {
    exports.component = new Promise((resolve, reject) => {
        resolve(Vue.component("test", {
            render(createElement){
                return createElement("div", {class:"test"})
            },
            data(){
                return{};
            }
        }));
    }）
})