1. 程式人生 > >Vue 去腳手架插件,自動加載vue文件,style怎麽辦

Vue 去腳手架插件,自動加載vue文件,style怎麽辦

ear 插件 tmp 擔心 命名 reac {} amp 存儲

書接上上會,因為當時也沒想好怎麽辦,所以裝聾作啞的忽略了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) } } })

Vue 去腳手架插件,自動加載vue文件,style怎麽辦