README

项目介绍

在Yii项目中使用Vue进行组件化开发。

安装方法

composer require evondu/yii2-vue

项目说明

YII2框架本身视图层组件(Widget)是以混编组件的形式设计，因此页面会被分割到多个文件中并且难以对JavaScript的分布做出限制，而Vue恰恰要求应用部分不能存在JavaScript，所以Vue难以直接在YII中应用起来，而本依赖就是用解决这个。其提供了一组导入辅助函数对个各文件中的JavaScript、Style进行压缩与分离，从而让Vue能在Yii项目中使用起来。

Yii与Vue结合使用

变量转化

• 本库中提供将PHP变量转化成JavaScript变量的辅助函数，变量转化后可以便于Vue对其进行操作
• 布尔型会被处理成字符串的1和0，目的是适配Yii的表单传值和处理
• 变量转换使用yiivue\Import::value()（在视图层中使用）
  • 示例：yiivue\Import::value($this, $model, "data");
  • 第一个参数为yii\web\View对象，即视图层的$this
  • 第二个参数是要转换PHP变量
  • 第三个参数为转换成JavaScript后变量的名称

表单提交

• Yii的默认表单提交方式为"同步跳转式提交"
• 本库提供把JavaScript对象以表单形式提交的辅助函数，并已经注入到Vue的原型方法this.$yii.submit()
  • 示例：this.$yii.submit({'name':'test'}, "Demo");
  • 第一个参数为提交的JavaScript对象
  • 第二个参数为Yii中的模型名（用于迎合Yii的表单提交方式）
  • 示例执行后POST的数据为：Demo[name]=test
  • 并且此种提交方式支持Yii的CSRF认证

编写Vue组件（PHP混编组件）

实现概述

• 组件的实现，扩展自Yii的$view->render($path, $params),故支持PHP参数传递和混编
• 组件模板部分使用component-template标签，javascript和style部分照旧用script和style标签
• 组件导入使用yiivue\Import::component()（在视图层中使用）
  • 示例：yiivue\Import::component($this,'@app/views/components/avatar',[]);
  • 第一个参数为yii\web\View对象，即视图层的$this
  • 第二个参数为编写的组件
  • 第三个参数为PHP参数的key-value数组
• 在Vue组件中template的值必须为：template: '{{component-template}}'（注意这里用单引号）
• 可以配置好GII后用模板生成CRUD，然后对照其中的_form文件查看（此为一个完整混编Vue组件）

组件例子

• 示例组件（路径：app/views/components/test.php）：

<!-- 组件样式 -->
<style>
    .test{  color: red; }
</style>
<!-- 组件模板 -->
<component-template>
    <div class="test">
        {{value}} <?="支持PHP混编"?>
    </div>
</component-template>
<!-- 组件代码 -->
<script>
    Vue.component('test', {
        template: '{{component-template}}',
        model: { prop: 'value', event: 'change'},
        props:{
            'value':{ type: String, default: "Demo Component"}
        }
    });
</script>

• 使用方法（在Yii的视图层使用）：

<?php
yiivue\Import::component($this, '@app/views/components/test');
?>
<div id="app">
    <test></test>
</div>

<script>
    Vue.component('lte-content', {
       template: '{{component-template}}'
    });
</script>

项目架构

src
    assets/                 Yii的Asset类
    core/                   核心类库
    static/                 静态资源

参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request