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)
        }
    }
})

原文地址:https://www.cnblogs.com/allofalan/p/9941853.html

时间: 2024-10-09 11:31:08

Vue 去脚手架插件,自动加载vue文件,style怎么办的相关文章

Spring boot 国际化自动加载资源文件问题

Spring boot 国际化自动加载资源文件问题 最近在做基于Spring boot配置的项目.中间遇到一个国际化资源加载的问题,正常来说只要在application.properties文件中定义正确的资源文件路径,Spring boot就启动时就会自动加载资源. spring.messages.basename=i18n/message 但是我的项目修改后获取消息时系统报错,找不到对应语言的资源配置.于是试图找到原因.Google好久都没找到,简直好像就我一个人遇到这鬼问题一样??.只好自

php自动加载类文件探讨,spl_autoload_register自动加载原理

spl_autoload_register函数是实现自动加载未定义类功能的的重要方法,所谓的自动加载意思就是 我们的new 一个类的时候必须先include或者require的类文件,如果没有include或者require,则会报错.那这样我们就必须在文件头部写上许多include或require文件,非常麻烦 为了使得没有include或者require类的时候也正常new一个类,所以有了自动加载的概念,也就是说new一个类之前不用事先包含类文件也可以正常new,这样我们的文件头部就不用包含

composer自动加载一个文件后必须执行命令composer dump-autoload

"autoload": { "classmap": [ "database" ], "psr-4": { "App\\": "app/" }, "files":[ "app/Common/function.php", "api/qqOauth/qqConnectAPI.php" ] }, 比如我新增了一个qq的登录api(api

Vue 去脚手架插件,自动加载vue文件

接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都不是问题. 读取 读取不用再聊了,一句话,远程请求,只要服务器答应,这个不麻烦. 读取之后的处理 上回,忙着把他渲染出来,所以都没想过其他事情,那可做的事情其实很多. 例如 1. 放到localstrage里面存起来,这对于复用组件是会提速很多的不用http协议传输,只在本地读取一个字符串 2. 或

xdebug下用 spl_autoload_register 自动加载类文件时,会出现超时

如题

PHP面向对象之类的自动加载

类的自动加载 含义: 当某行代码需要一个类的时候,php的内部机制可以做到"自动加载该类文件",以满足该行需要一个类的这种需求. 什么时候需要一个类? 1,new一个对象的时候: 2,使用一个类的静态方法的时候: 3,定义一个类(B)并以另一个类(A)作为父类的时候: 条件和要求 1, 当需要一个类的时候,就会自动调用某个函数(默认是__autoload),并传入所需要的类的名字 2, 一个类应该保存到一个独立的"类文件中":即其中只有该类的定义,没有别的代码: 3

框架开发(五)----自动加载类

一 . 为什么自动加载 自动加载字面的意思就不解释了.我这里自动加载类解析下 是自动加载类文件的意思.__autoload方法完全可行,但是不要问为什么,还是用spl_autoload_register.不只是灵活,而且就是灵活,还是灵活,体现在__autoload只能这么命名,spl_auto_register() 能调用不同的函数. 二  自动加载函数原理   通常情况下,一个类的定义都是一个文件,当类与类需要相互引用的时候,就需要include(require)相应的类文件,带来的问题就是

PHP PSR4自动加载代码赏析

第一部分是引入自动加载配置文件 1.入口文件:autoload.php里面没什么东西,就是导入ComposerAutoloader主题文件,一般由一个复杂的名字,不过不用担心就是机器随机生成的一个码而已,就是普通的一个类,名字比较长了. require_once __DIR__ . '/composer/autoload_real.php'; return ComposerAutoloaderInitd0a5721608b46fc86f3b980fb0cea37d::getLoader(); 2

YII框架的类自动加载机制

YII之所以能实现快速的自动加载类文件,是因为它通过两种途径来实现. 先看文件 vendor\yiisoft\yii2\BaseYii.php 里面的 autoload 方法 public static function autoload($className) { if (isset(static::$classMap[$className])) { //先去类地图里面找 $classFile = static::$classMap[$className]; if ($classFile[0]