在hexo的next主题中使用vue

最近在学vue，突然突发奇想能不能用vue框架对博客做一个改造，说开工就开工。

下载vue.js并载入

直接搜索引擎搜索vue，在官网下载得到vue.js文件，放到我们博客这个目录下：themes\next\source\js\src\vue.js。

然后我们再建立一个测试用的js文件，称为main，放在themes\next\source\js\src\vue-script\main.js（文件夹需另建）。

新建完js文件之后，需要引入js。打开themes\next\layout\_scripts\commons.swig文件，加入代码：

{%
set js_vue = [
    'src/vue.js',
    'src/vue-script/main.js'
  ]
%}

{% for common in js_vue %}
  <script type="text/javascript" src="{{ url_for(theme.js) }}/{{ common }}?v={{ theme.version }}"></script>
{% endfor %}

测试

现在我们打开themes\next\layout\_layout.swig文件，这个文件代表着整个博客页面的布局。我们在body下新增div：

<div v-bind:class="[VueTestClass]" id="vue-test">
    <p>${ vueStr }</p>
    <p>${ message + 1 }</p>
    <p>${ ok ? 'ok' : 'not ok' }</p>
    <button v-on:click="OnClick">Click Me</button>
</div>

用过vue的读者会发现了，vue不是使用两个大括号把变量括起来的吗？为啥到这里变成了${}了？

这是由于next主题使用的swig模板同样会解析带双花括号形式的文本，在被vue捕获之前，会被swig先去掉，导致无效。参见这里

接下来看themes\next\source\js\src\vue-script\main.js，我们新建一个vue实例。注意，这个vue实例要加入语句改变变量标识符：

new Vue({
    delimiters: ['${', '}'], // 关键是这句话
    el: '#vue-test',
    data: {
        vueStr: 'abcd',
        message: 1,
        VueTestClass: 'vue-test',
        ok: true
    },
    methods: {
        OnClick: function () {
            this.message += 12345
            console.log(this.message)
        }
    },
    created: function () {
        console.log('vue-test is created.')
    }
})

可以看到最后class会被替换成vue-test，这个class我们定义在themes\next\source\css\_custom\custom.styl中：

.vue-test {
    width: 100%;
    height: 256px;
}