Vue 去脚手架

Posted 2021-01-06 allofalan

上回模仿了一个nw，按照原理说，简单。

今天说Vue，脚手架是个好东西，做项目都给你配置好，不过对于我这种只想做一个界面的人来说，有点儿太大了，用不上。

如果说，不用脚手架要面临哪些问题呢。

　　1. 组件，组件文件vue，用的是es6语法，目前大多数浏览器不支持，其实就两个命令 import export，为了这点儿东西，哎，想想就烦。

　　2. 不用组件呢？，vue的灵魂就两个，一个是mvvm模式的绑定，二个就是组件，确实想用。

没法想，自己加载吧，我们来聊一聊，手动加载vue文件组件吧。

先来分析一下

　　1.vue是个什么东西：简单说，是一个对象，我们构建新的vue对象时候，要提供一个配置对象options，关键就在这个配置对象上。

　　它包含了

　　　　el：挂载点element

　　　　data：数据

　　　　methods：方法

　　　　　.....

　　那么，

　　2 . 组件是什么东西呢，嗯，简单的说也是一个对象，这个对象和vue配置类一样啊，多了一个template模板而已

　　它也和vue配置对象一样，包含那几样东西。

　　3. vue文件是什么东西呢，vue文件包含了什么呢，简单的说，包含了组件的模板和配置类options。

ok，现在清楚了，如果我们把vue文件解析一下，组合出一个配置类，也就是制造一个options，把模板放进去，他就是一个组件的配置类options

　　再通过一些文档上指出的组件加载方式，完全可以，自行，动态的，加载vue文件，而不用脚手架，当然了，vue文件，本身也可以自己写，不用es6格式，有什么所谓呢。反正造出来就好了

 

重点，算是重点吧，具体要分哪几步

　　1. 加载vue文件，没法，js是前端语言，要想问后端要文件，那就httprequest，httprequest是js原生的请求类，要是觉得麻烦，jquery里面也有ajex是这么写吧，我没用过，vue-resource也提供了一样的功能，此外还有好多，不列举了

　　重点是，一定要用同步的请求去做我们要做的事，不管你用什么插件，还是用原生的，这里我说，原生的好搞一些。

　　2. 分析vue，文件读上来了，分析也不叫分析吧，这太简单了，字符串分析，方法太多了，一个一字看，也行，分隔符分割也行，当然还有正则表达式，我们要做的提取个部分，<template>部分，<scripte>部分，<style>部分

　　3. 组合，制造一个options对象,随你造咯，造好返回一个对象给Vue就好了。

全局对象就Vue.components()

局部对象就，组件options.components上面加一下。

我简单写了一个插件，用作配合非脚手架加载vue，不如看一下，我想也就都不用说了。

var vueloader = {
    install : function(Vue,options){

    Vue.ImportFrom = function(url){
        url = window.location.href + url
        var result
        
        RequestVue(url,function(r){
            var context = r    
            if(context){
                var script  = getTagContext(‘script‘,context)
                
                var options = eval("("+script+")")
            
                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(vueloader)

插件要提供install方法，两个参数Vue，options

往Vue上挂一个方法importVue，然后最下面Vue.use 这个插件。

在你的 html中 <script src="vue-component-loader.js" type="text/javascript" charset="utf-8"></script>

这是我的插件文件名

之后，随便在js里面用了。

经过，我的一顿分析，eval()是个很牛逼的方法，它可以执行script，从而简化了很多麻烦事

我找个vue文件你看

<template>
    <div>
        <p>this is father:{{msg}}</p>
        <p><button @click=‘say‘>Say</button></p>
        <cson :msgfrom = msgfromfather></cson>
    </div>
}
</template>

<script>

    {
    name:‘cfather‘,
    data:function(){return{
        msg:"",
        msgfromfather:‘msg from father‘
    }},
    methods:{
        say:function(){
        this.msg = "hello you!"
        this.msgfromfather = ‘father:hello from father‘    
        }
    },
    components:{‘cson‘:Vue.ImportFrom(‘cson.vue‘)}
    }
        
</script>

<style>
</style>

 

这是我写的vue文件，也是分来来template和script这些

那么，我不需要写 export default了，我直接一个对象就好了，因为我的解析工具里面，直接把这个对象字符串用eval（）给实例化了

第二点， components:{‘cson‘:Vue.ImportFrom(‘cson.vue‘)}

这里直接把插件里的加载方法写进去了，然后eval直接给执行了，多省事。

 

那么，该说的就说完了，回见了。