Vue 自動加載vue文件，style怎麼辦

書接上上會，由於當時也沒想好怎麼辦，因此裝瘋賣傻的忽略了Vue文件中的Style，Vue的作法我看着暈乎乎的，細想的話，無非就是自動填寫到dom中，所擔憂的無非是命名衝突。

在一個項目中（像我這種自娛自樂的項目中）加載的自定義組件是不會重名的（應該不會吧，反正就是讓他不會的意思），那就每一個Vue中加組件名作前綴，而後duang，寫入dom。

規規矩矩的放在head裏，齊活了

更新一下我那個牛逼的文件

// vue插件引入
Vue.use({
    // 插件初始化函數
    install: function(Vue, options) {
        Vue.CptsLoader = {
            isSaveTemplateToLocalStorage: false,
            ProjectVersion: "1.0.0.0",
            checkVersion: function() {
                var ver = localStorage.getItem(window.location.href + 'ProjectVersion')
                if(!ver || this.ProjectVersion !== ver) {
                    localStorage.clear()
                    localStorage.setItem(window.location.href + 'ProjectVersion', this.ProjectVersion)
                }
            }
        }
        // 包裝new Vue()
        Vue.create = function(options) {
            Vue.CptsLoader.checkVersion()
            // 加載options的components
            importCpts(options)
            var vm = new Vue(options)
            Vue.http.options.emulateJSON = true
            return vm
        }
        Vue.loadvue = function(options) {
            return loadVue(options)
        }
        //加載options的components
        importCpts = function(options) {
            //緩存components
            var cpts = options.components
            if(cpts !== null){ 
                //判斷存在components列表而且是數組
                if(Array.isArray(cpts)) {                    
                    //創建一個緩存空對象
                    var tmpcpts = null
                    //循環加載每一項組件
                    cpts.forEach((cptname) => {
                        //加載Vue文件
                        var newCpt = loadVue(cptname)
    
                        if(newCpt) {
                            if(!tmpcpts)
                                tmpcpts = {}
                            tmpcpts[newCpt.name] = newCpt
                        }
                    })
                    //回填到options
                    options.components = tmpcpts    
                }
            }
        }            
    
        loadVue = function(name) {
            //生成路徑
            var url = window.location.href + name + ".vue"
            //讀取本地存儲
            var content = Vue.CptsLoader.isSaveTemplateToLocalStorage ? localStorage.getItem(url) : null
            if(!content) {
                RequestVue(url, (res) => {
                    content = res
                })
            }
            //讀取失敗，返回空
            if(!content) return null

            Vue.CptsLoader.isSaveTemplateToLocalStorage && localStorage.setItem(url, content)

            //讀取成功，解析
            
            //獲取script
            var options = eval("(" + GetTagcontent('script', content) + ")")
            
            //嵌套調用加載子組件
            options && options.components && importCpts(options)

            var temp = GetTagcontent('template', content)

            //加載css
            var css = GetTagcontent('style',content)
            
            if(css.trim().length>0 && !document.getElementById(options.name + "-style")){
                var newstyle = document.createElement('style')
                newstyle.id = options.name + "-style"
                newstyle.innerHTML =  css 
                document.head.appendChild(newstyle)
            }
            
            //加載模板
            options.template = temp 

            return options
        }
        
        GetTagcontent = function(tag, content) {
            var reg = new RegExp("<" + tag + ">([\\s\\S]*)<\/" + tag + ">")
            if(reg.test(content)) {
                return RegExp.$1
            }
            return ""
        }

        RequestVue = function(url, cb) {
            var request = new XMLHttpRequest()
            request.open('GET', url, false)
            request.send(null)
            request.status === 200 && cb(request.responseText)
        }
    }
})