# vue-easy-loader

**Repository Path**: ereddate2017/vue-easy-loader

## Basic Information

- **Project Name**: vue-easy-loader
- **Description**: vue程序化编程按需加载工具，支持本地js脚本、样式、less、图片文件及远程文件加载
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2020-04-29
- **Last Updated**: 2023-03-06

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# vue-easy-loader

#### 介绍
vue程序化编程按需加载工具，支持本地js脚本、样式、less、图片文件及远程文件加载。
适用于vue项目中动态加载模块、动态路由及相关组件加载、短生命期需求、全编程化开发模块加载等的快速迭代开发使用。

#### 依赖
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
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并插入到head标签的style标签中
            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{};
            }
        }));
    }）
})
```