书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了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怎么办的更多相关文章

  1. 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间

    [源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...

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

    Spring boot 国际化自动加载资源文件问题 最近在做基于Spring boot配置的项目.中间遇到一个国际化资源加载的问题,正常来说只要在application.properties文件中定义 ...

  3. 前端 | 页面触底自动加载 Vue 组件

    不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...

  4. JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(12):XML配置自动扫描包,自动加载*.properties文件

    一.XML和注解组合使用 前几篇的测试案例都是在Java类中配置,现在换一种使用方式,在XML中配置,使Spring IoC容器在启动之后自动去扫描配置的包路径,扫描加载指定路径下的propertie ...

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

    spl_autoload_register函数是实现自动加载未定义类功能的的重要方法,所谓的自动加载意思就是 我们的new 一个类的时候必须先include或者require的类文件,如果没有incl ...

  6. php中 __autoload函数 自动加载类文件机制

    魔术函数,自动加载机制function __autoload($class_name) {   //自动传递的是类名$path = str_replace('_', '/', $class_name) ...

  7. Intellij Idea自动加载改动文件和自动自动热部署加载

    1:准备原料 我的Intellij Idea的版本是15. 之后tomcat自动加载修,你只需要在浏览器刷新一下页面即可. ************************************** ...

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

    "autoload": { "classmap": [ "database" ], "psr-4": { "A ...

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

    接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都 ...

随机推荐

  1. 小于12px的字体大小在Chrome中不起作用

    今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...

  2. May 17th 2017 Week 20th Wednesday

    Men are nearly always willing to believe what they wish. 人总爱想入非非,把愿望变成现实. It is just the humancondit ...

  3. ZT 头文件包含其实是一想很烦琐的工作 第一个原则应该是,如果可以不包含头文件

    当出现访问类的函数或者需要确定类大小的时候,才需要用头文件(使用其类定义)    http://blog.csdn.net/clever101/article/details/4751717 看到这个 ...

  4. TCP的建立和关闭

    一.TCP头信息 简单的至少应该知道,源端口,目的端口,序号,确认号,标志位,校验和 二.TCP的建立 1.客户端将SYN标志位置1,同时生成随机的序号,确认号是0. 2.服务器接收到SYN,知道有人 ...

  5. IOS 录音(AVAudioRecorder)

    #import "HMViewController.h" #import <AVFoundation/AVFoundation.h> @interface HMView ...

  6. 2018.11.19 Struts2中Action类的书写方式

    方式1: 方式2: 方式3

  7. mybatis学习记录二——mybatis开发dao的方法

    4.1     SqlSession使用范围 4.1.1     SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSession ...

  8. redis的事务、主从复制、持久化

    redis事务 和其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中, MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基石.Redis中事务 ...

  9. python 通过 socket 发送文件

    目录结构: client: #!/usr/bin/env python # -*-coding:utf-8 -*- import socket, struct, json download_dir = ...

  10. android imageview使用的时候 引用资源src和background的区别

    android imageview使用的时候 引用资源时src和background的区别 src更强调内容并且不行拉伸图片进行适配,而background更注重引用图片,会对图片进行拉伸