离开 nodejs Vue 插件，自动加载vue文件
接上回
一些本质
本质上，vue，无非是维护options，每个Vue对象的初始化配置对象不触及Vue内部而言，在外部想怎么改都是可以的，只要保证options的正确，一切都不是问题。
读取
读取不用再聊了，一句话，远程请求，只要服务器答应，这个不麻烦。
读取之后的处理
上回，忙着把他渲染出来，所以都没想过其他事情，那可做的事情其实很多。
例如
1. 放到localstrage里面存起来，这对于复用组件是会提速很多的不用http协议传输，只在本地读取一个字符串
2. 或者在本地存成vue文件，随时读取都可以
3. 更异想天开的可以组织好options发回服务器，下次一次性读上来，也没问题，似乎触及了某些编译的原理，想想罢了，再研究。
因为
想法很多，还是不要好高骛远，js 对对象序列化这一部分，我还没来得及百度，也不知道对象的方法要如何存储，只有整篇vue存起来，现在看还是比较简单的。
为了极大的简化（偷懒）vue文件的编制工作，import 什么的不如一步到位都省略掉，开发者无需关心组件的加载问题，只要写好关联即可，就像这样
<template>
<div>
<p>this is father,he has a son</p>
<p>{{msg}}</p>
<button @click="say">say</button><button @click="saytoson">saytoson</button>
<son :msgfromfather = msgtoson></son>
<hr></hr>
</div>
</template>
<script>
{
name:'father',
data:function(){return{
msg:"",
msgtoson:""
}},
methods:{
say:function(){
this.msg="father said:Hello there!"
},
saytoson:function(){
this.msgtoson = "father said to son:hi,son"
}
},
components:['components/son']
}
</script>
<style>
</style>script部分，不再有任何涉及到调用组件方法的部分，把 components属性变成数组，直接存储目标的路径即可，在解析过程中自动替换成包含 子组件对象的对象即可
转换完应该类似components:{{name:'son',methods ... .}}这样的对象，想法到了，一切都是顺其自然的，因为代码实际上是最简单的部分。
新鲜出炉的插件就像下面这样。
var vcl = {
install: function(Vue, Options) {
Vue.create = function(options) {
importCpts(options)
return new Vue(options)
}
importCpts = function(options) {
//存在组件列表
if(options.components) {
//组件列表是数字
if(options.components instanceof Array) {
var tmpCpts = options.components
options.components = {}
tmpCpts.forEach(function(item) {
var newCptOption = LoadFile(item)
options.components[newCptOption.name] = newCptOption
})
}
}
}
LoadFile = function(url) {
var url1 = window.location.href + url + '.vue'
var context = ""
var result = {}
var stg = localStorage.getItem(url1)
if(stg) {
context = stg
} else {
RequestVue(url1, function(r) {
context = r
localStorage.setItem(url1,context)
})
}
if(context) {
var script = GetTagContext('script', context)
var options = eval("(" + script + ")")
importCpts(options)
options.template = GetTagContext('template', context)
result = options
}
return result
}
function RequestVue(url, cb) {
let request = new XMLHttpRequest()
request.user = ''
request.open('GET', url, false)
request.send(null)
if(request.status === 200) {
cb(request.responseText)
}
}
function GetTagContext(tag, str) {
var reg = new RegExp("<" + tag + ">([\\s\\S]*)<\/" + tag + ">")
var matchs = reg.exec(str)
return matchs[1]
}
}
}
Vue.use(vcl)直接把 new Vue也包装起来，所有optinos在使用之前，都去importCpts一下，去检查有没有子组件components存在，有就load一下，没有就过。清晰明了
并且，如果需要加载，也先去localstrage去看一眼，有的化就不用远程加载了，省事了。
重定义的一些东西
因为插件的原因，对vue文件，和项目重新定义了一些格式上的规范
1. 入口
Vue.create() 方法，该方法接受一个options，也可以简写成 Vuecreate({el:'#xxx' .. ...})
2. vue文件中 <script> 部分，直接{...} 无需加载组件
3. components变成数组 like components:['subcomponentspath'] , 该数组存储子组件的路径，路径的格式是 目录/文件名，无后缀，所有组件是从根目录开始的，懒，没研究相对路径，先这么写吧
4. 其他的，自己去发现吧，想不起来了。
未完待续，后面再去便利化，是唯一的目标。