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)
}
}
})
Vue 去脚手架插件,自动加载vue文件,style怎么办的更多相关文章
- 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间
[源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...
- Spring boot 国际化自动加载资源文件问题
Spring boot 国际化自动加载资源文件问题 最近在做基于Spring boot配置的项目.中间遇到一个国际化资源加载的问题,正常来说只要在application.properties文件中定义 ...
- 前端 | 页面触底自动加载 Vue 组件
不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...
- JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(12):XML配置自动扫描包,自动加载*.properties文件
一.XML和注解组合使用 前几篇的测试案例都是在Java类中配置,现在换一种使用方式,在XML中配置,使Spring IoC容器在启动之后自动去扫描配置的包路径,扫描加载指定路径下的propertie ...
- php自动加载类文件探讨,spl_autoload_register自动加载原理
spl_autoload_register函数是实现自动加载未定义类功能的的重要方法,所谓的自动加载意思就是 我们的new 一个类的时候必须先include或者require的类文件,如果没有incl ...
- php中 __autoload函数 自动加载类文件机制
魔术函数,自动加载机制function __autoload($class_name) { //自动传递的是类名$path = str_replace('_', '/', $class_name) ...
- Intellij Idea自动加载改动文件和自动自动热部署加载
1:准备原料 我的Intellij Idea的版本是15. 之后tomcat自动加载修,你只需要在浏览器刷新一下页面即可. ************************************** ...
- composer自动加载一个文件后必须执行命令composer dump-autoload
"autoload": { "classmap": [ "database" ], "psr-4": { "A ...
- Vue 去脚手架插件,自动加载vue文件
接上回 一些本质 本质上,去脚手架也好,读取vue文件也好,无非是维护options,每个Vue对象的初始化配置对象不触及Vue内部而言,在外部想怎么改都是可以的,只要保证options的正确,一切都 ...
随机推荐
- April 2 2017 Week 14 Sunday
You only live once, but if you do it right, once is enough. 人生只有一次,但如果活对了,一次也就够了. Maybe I am going t ...
- March 20 2017 Week 12 Monday
A goal is a dream with a deadline. 目标就是给梦想一个期限. Dream without dealine is just daydream, because you ...
- 真的有用吗?(GitHub)
为什么要新建一个GitHub账号 一个程序员不知道GitHub,那我就笑笑,呵呵哒.什么是GitHub呢? 就我知道的git,谈一下.Git是一个版本控制软件,这个软件最初是Linux之父林纳斯. ...
- 课堂笔记--------JavaScript 的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- (第四场)G Maximum Mode 【YY+暴力】
链接:https://www.nowcoder.com/acm/contest/142/G 来源:牛客网 题目描述 The mode of an integer sequence is the val ...
- POJ 2976 Dropping tests 【01分数规划+二分】
题目链接:http://poj.org/problem?id=2976 Dropping tests Time Limit: 1000MS Memory Limit: 65536K Total S ...
- build.gradle中的dependencies
demo_myna中的build.gradle中的dependencies是依赖项目.比如之前开发的一个项目A,现在新的项目B要使用项目A的功能,那么把项目A作为类库关联进来,这样b就能直接使用A的功 ...
- (转)理解YOLOv2训练过程中输出参数含义
最近有人问起在YOLOv2训练过程中输出在终端的不同的参数分别代表什么含义,如何去理解这些参数?本篇文章中我将尝试着去回答这个有趣的问题. 刚好现在我正在训练一个YOLOv2模型,拿这个真实的例子来讨 ...
- 课时57.HTML被废弃的标签(掌握)
1.为什么HTML中有一部分标签会被废弃? 因为当前HTML中的标签只有一个作用,就是用来添加语义,而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰 ...
- oracle 分组函数、视图
组函数 分组函数作用于一组数据,对每一组返回一个值 组函数类型: 1.计数 count(列名 或 表达式) 对满足的行数进行统计 2.求和 sum(列名 或 表达式 ...