Vue 去脚手架插件，自动加载vue文件

Posted 2021-01-07 allofalan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 去脚手架插件，自动加载vue文件相关的知识，希望对你有一定的参考价值。

接上回

一些本质

　　本质上，去脚手架也好，读取vue文件也好，无非是维护options，每个Vue对象的初始化配置对象不触及Vue内部而言，在外部想怎么改都是可以的，只要保证options的正确，一切都不是问题。

读取

　　读取不用再聊了，一句话，远程请求，只要服务器答应，这个不麻烦。

读取之后的处理

　　上回，忙着把他渲染出来，所以都没想过其他事情，那可做的事情其实很多。

例如

　　1. 放到localstrage里面存起来，这对于复用组件是会提速很多的不用http协议传输，只在本地读取一个字符串

　　2. 或者在本地存成vue文件，随时读取都可以

　　3. 更异想天开的可以组织好options发回服务器，下次一次性读上来，也没问题，似乎触及了某些编译的原理，想想罢了，再研究。

因为

　　想法很多，还是不要好高骛远，js 对对象序列化这一部分，我还没来得及百度，也不知道对象的方法要如何存储，只有整篇vue存起来，现在看还是比较简单的。

为了极大的简化（偷懒）vue文件的编制工作，import 什么的不如一步到位都省略掉，开发者无需关心组件的加载问题，只要写好关联即可，就像这样

<template>
    <div>
        <p>this is father,he has a son</p>
        <p>{{msg}}</p>        
        <button @click="say">say</button><button @click="saytoson">saytoson</button>
        <son :msgfromfather = msgtoson></son>
        <hr></hr>
    </div>
</template>

<script>
    {
        name:‘father‘,
        data:function(){return{
            msg:"",
            msgtoson:""
        }},
        methods:{
            say:function(){
                this.msg="father said:Hello there!"
            },
            saytoson:function(){
                this.msgtoson = "father said to son:hi,son"
            }
        },
        components:[‘components/son‘]
    }
</script>

<style>
</style>

script部分，不再有任何涉及到调用组件方法的部分，把 components属性变成数组，直接存储目标的路径即可，在解析过程中自动替换成包含子组件对象的对象即可

转换完应该类似components:{{name:‘son‘,methods ... .}}这样的对象，想法到了，一切都是顺其自然的，因为代码实际上是最简单的部分。

新鲜出炉的插件就像下面这样。

var vcl = {
    install: function(Vue, Options) {
        Vue.create = function(options) {
            importCpts(options)                    
            return new Vue(options)
        }

        importCpts = function(options) {
            //存在组件列表
            if(options.components) {
                //组件列表是数字
                if(options.components instanceof Array) {
                    var tmpCpts = options.components
                    options.components = {}
                    tmpCpts.forEach(function(item) {
                        var newCptOption = LoadFile(item)
                        options.components[newCptOption.name] = newCptOption
                    })
                }
            }
        }

        LoadFile = function(url) {

            var url1 = window.location.href + url + ‘.vue‘
            var context = ""
            var result = {}

            var stg = localStorage.getItem(url1)
            if(stg) {
                context = stg
                
            } else {
                RequestVue(url1, function(r) {
                    context = r
                    localStorage.setItem(url1,context)
                })
            }
            if(context) {
                var script = GetTagContext(‘script‘, context)

                var options = eval("(" + script + ")")

                importCpts(options)

                options.template = GetTagContext(‘template‘, context)

                result = options
            }

            return result
        }

        function RequestVue(url, cb) {
            let request = new XMLHttpRequest()
            request.user = ‘‘
            request.open(‘GET‘, url, false)
            request.send(null)
            if(request.status === 200) {
                cb(request.responseText)
            }
        }

        function GetTagContext(tag, str) {
            var reg = new RegExp("<" + tag + ">([\s\S]*)</" + tag + ">")
            var matchs = reg.exec(str)
            return matchs[1]
        }

    }
}
Vue.use(vcl)