标签：template 需要 style regexp export data utf-8 exec 表达式
上回模仿了一个nw，按照原理说，简单。
今天说Vue，脚手架是个好东西，做项目都给你配置好，不过对于我这种只想做一个界面的人来说，有点儿太大了，用不上。
如果说，不用脚手架要面临哪些问题呢。
1. 组件，组件文件vue，用的是es6语法，目前大多数浏览器不支持，其实就两个命令 import export，为了这点儿东西，哎，想想就烦。
2. 不用组件呢？，vue的灵魂就两个，一个是mvvm模式的绑定，二个就是组件，确实想用。
没法想，自己加载吧，我们来聊一聊，手动加载vue文件组件吧。
先来分析一下
1.vue是个什么东西：简单说，是一个对象，我们构建新的vue对象时候，要提供一个配置对象options，关键就在这个配置对象上。
它包含了
el：挂载点element
data：数据
methods：方法
.....
那么，
2 . 组件是什么东西呢，嗯，简单的说也是一个对象，这个对象和vue配置类一样啊，多了一个template模板而已
它也和vue配置对象一样，包含那几样东西。
3. vue文件是什么东西呢，vue文件包含了什么呢，简单的说，包含了组件的模板和配置类options。
ok，现在清楚了，如果我们把vue文件解析一下，组合出一个配置类，也就是制造一个options，把模板放进去，他就是一个组件的配置类options
再通过一些文档上指出的组件加载方式，完全可以，自行，动态的，加载vue文件，而不用脚手架，当然了，vue文件，本身也可以自己写，不用es6格式，有什么所谓呢。反正造出来就好了
重点，算是重点吧，具体要分哪几步
1. 加载vue文件，没法，js是前端语言，要想问后端要文件，那就httprequest，httprequest是js原生的请求类，要是觉得麻烦，jquery里面也有ajex是这么写吧，我没用过，vue-resource也提供了一样的功能，此外还有好多，不列举了
重点是，一定要用同步的请求去做我们要做的事，不管你用什么插件，还是用原生的，这里我说，原生的好搞一些。
2. 分析vue，文件读上来了，分析也不叫分析吧，这太简单了，字符串分析，方法太多了，一个一字看，也行，分隔符分割也行，当然还有正则表达式，我们要做的提取个部分，<template>部分，<scripte>部分，<style>部分
3. 组合，制造一个options对象,随你造咯，造好返回一个对象给Vue就好了。
全局对象就Vue.components()
局部对象就，组件options.components上面加一下。
我简单写了一个插件，用作配合非脚手架加载vue，不如看一下，我想也就都不用说了。
var vueloader = { install : function(Vue,options){ Vue.ImportFrom = function(url){ url = window.location.href + url var result RequestVue(url,function(r){ var context = r if(context){ var script = getTagContext(‘script‘,context) var options = eval("("+script+")") 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(vueloader)
插件要提供install方法，两个参数Vue，options
往Vue上挂一个方法importVue，然后最下面Vue.use 这个插件。
在你的 html中 <script src="vue-component-loader.js" type="text/javascript" charset="utf-8"></script>
这是我的插件文件名
之后，随便在js里面用了。
经过，我的一顿分析，eval()是个很牛逼的方法，它可以执行script，从而简化了很多麻烦事
我找个vue文件你看
<template>
<div>
<p>this is father:{{msg}}</p>
<p><button @click=‘say‘>Say</button></p>
<cson :msgfrom = msgfromfather></cson>
</div>
}
</template>
<script>
{
name:‘cfather‘,
data:function(){return{
msg:"",
msgfromfather:‘msg from father‘
}},
methods:{
say:function(){
this.msg = "hello you!"
this.msgfromfather = ‘father:hello from father‘
}
},
components:{‘cson‘:Vue.ImportFrom(‘cson.vue‘)}
}
</script>
<style>
</style>
这是我写的vue文件，也是分来来template和script这些
那么，我不需要写 export default了，我直接一个对象就好了，因为我的解析工具里面，直接把这个对象字符串用eval（）给实例化了
第二点， components:{‘cson‘:Vue.ImportFrom(‘cson.vue‘)}
这里直接把插件里的加载方法写进去了，然后eval直接给执行了，多省事。
那么，该说的就说完了，回见了。
标签：template 需要 style regexp export data utf-8 exec 表达式
原文地址：https://www.cnblogs.com/allofalan/p/9662857.html
