让 Vue 离开nodejs

100 阅读 0 评论 66 点赞

我是靠谱客的博主狂野苗条，这篇文章主要介绍让 Vue 离开nodejs，现在分享给大家，希望可以做个参考。

上回模仿了一个nw，按照原理说，简单。

今天说Vue，脚手架是个好东西，做项目都给你配置好，nodejs很牛，不过对于我这种只想做一个界面的人来说，有点儿太大了，用不上。

如果说，不用脚手架 nodejs要面临哪些问题呢。

　　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，不如看一下，我想也就都不用说了。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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文件你看

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>