接上回

一些本質

　　本質上，去腳手架也好，讀取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)

直接把 new Vue也包裝起來，所有optinos在使用之前，都去importCpts一下，去檢查有沒有子組件components存在，有就load一下，沒有就過。清晰明了

並且，如果需要加載，也先去localstrage去看一眼，有的化就不用遠程加載了，省事了。

重定義的一些東西

　　因為插件的原因，對vue文件，和項目重新定義了一些格式上的規範

　　1. 入口

　　　　Vue.create() 方法，該方法接受一個options，也可以簡寫成 Vuecreate({el:‘#xxx‘ .. ...})

　　2. vue文件中 <script> 部分，直接{...} 無需加載組件

　　3. components變成數組 like 　　components:[‘subcomponentspath‘] , 該數組存儲子組件的路徑，路徑的格式是 目錄/文件名，無後綴，所有組件是從根目錄開始的，懶，沒研究相對路徑，先這麽寫吧

　　4. 其他的，自己去發現吧，想不起來了。

未完待續，後面再去便利化，是唯一的目標。

Vue 去腳手架插件，自動加載vue文件