讓 Vue 離開nodejs

上回模仿了一個nw，按照原理說，簡單。

今天說Vue，腳手架是個好東西，作項目都給你配置好，nodejs很牛，不過對於我這種只想作一個界面的人來講，有點兒太大了，用不上。

若是說，不用腳手架 nodejs要面臨哪些問題呢。

　　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直接給執行了，多省事。

 

那麼，該說的就說完了，回見了。