Vue 去脚手架

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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>