README

这是为 Yii2 定制的 Vue.js + Vuex 扩展。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist kekaadrenalin/yii2-vue "*"

或者

"kekaadrenalin/yii2-vue": "*"

将以下内容添加到您的 composer.json 文件的 require 部分。

向应用程序配置文件的 components 部分添加一个新的组件

'components' => [
    'vue' => [
        'class' => 'kekaadrenalin\vue\GlobalComponent',
    ],
    // ...
],

使用方法

扩展安装后，只需在您的代码中通过以下方式使用它：

@app/views/layouts/main.php

<?php $vueRoot = Yii::$app->vue->root([
    'el' => [
        'id'    => 'global-vue-container',
        'class' => 'contents',
    ],

    'options' => [
        'data' => false,
    ],

    'store' => [
        'main' => [
            'state'     => [
                'count' => 0,
            ],
            'mutations' => [
                'increment' => new \yii\web\JsExpression('function(state) { state.count++ }'),
            ],
        ],
    ],
]) ?>

<?php $vueRoot->begin() ?>
    <?= $content ?>
<?php $vueRoot->end() ?>

@app/views/site/index.php

<?php $component = Yii::$app->vue->component([
    'id'   => 'Test',
    'data' => [
        'message' => '',
    ],
]); ?>

<?php $component->begin(); ?>
<div>
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<?php $component->end(); ?>

kekaadrenalin / yii2-vue

维护者

详细信息

README

安装

使用方法