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的正确,一切都 ...
随机推荐
- 小于12px的字体大小在Chrome中不起作用
今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...
- May 17th 2017 Week 20th Wednesday
Men are nearly always willing to believe what they wish. 人总爱想入非非,把愿望变成现实. It is just the humancondit ...
- ZT 头文件包含其实是一想很烦琐的工作 第一个原则应该是,如果可以不包含头文件
当出现访问类的函数或者需要确定类大小的时候,才需要用头文件(使用其类定义) http://blog.csdn.net/clever101/article/details/4751717 看到这个 ...
- TCP的建立和关闭
一.TCP头信息 简单的至少应该知道,源端口,目的端口,序号,确认号,标志位,校验和 二.TCP的建立 1.客户端将SYN标志位置1,同时生成随机的序号,确认号是0. 2.服务器接收到SYN,知道有人 ...
- IOS 录音(AVAudioRecorder)
#import "HMViewController.h" #import <AVFoundation/AVFoundation.h> @interface HMView ...
- 2018.11.19 Struts2中Action类的书写方式
方式1: 方式2: 方式3
- mybatis学习记录二——mybatis开发dao的方法
4.1 SqlSession使用范围 4.1.1 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSession ...
- redis的事务、主从复制、持久化
redis事务 和其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制.在Redis中, MULTI/EXEC/DISCARD/WATCH这四个命令是我们实现事务的基石.Redis中事务 ...
- python 通过 socket 发送文件
目录结构: client: #!/usr/bin/env python # -*-coding:utf-8 -*- import socket, struct, json download_dir = ...
- android imageview使用的时候 引用资源src和background的区别
android imageview使用的时候 引用资源时src和background的区别 src更强调内容并且不行拉伸图片进行适配,而background更注重引用图片,会对图片进行拉伸