PHPackages                             evondu/yii2-vue - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. evondu/yii2-vue

ActiveLibrary[Framework](/categories/framework)

evondu/yii2-vue
===============

Yii2中使用Vue进行组件开发

1.1.2(5y ago)39311MITPHP

Since Aug 15Pushed 5y ago1 watchersCompare

[ Source](https://github.com/EvonDu/yii2-vue)[ Packagist](https://packagist.org/packages/evondu/yii2-vue)[ RSS](/packages/evondu-yii2-vue/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (7)Dependencies (1)Versions (8)Used By (1)

yii2-vue
========

[](#yii2-vue)

项目介绍
----

[](#项目介绍)

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

安装方法
----

[](#安装方法)

`composer require evondu/yii2-vue`

项目说明
----

[](#项目说明)

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

Yii与Vue结合使用
-----------

[](#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混编组件）
----------------

[](#编写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）：

```

    .test{  color: red; }

        {{value}}

    Vue.component('test', {
        template: '{{component-template}}',
        model: { prop: 'value', event: 'change'},
        props:{
            'value':{ type: String, default: "Demo Component"}
        }
    });

```

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

```

    Vue.component('lte-content', {
       template: '{{component-template}}'
    });

```

项目架构
----

[](#项目架构)

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

```

参与贡献
----

[](#参与贡献)

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

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~109 days

Recently: every ~160 days

Total

7

Last Release

1854d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/bfc78ed4e60da9a8edecf6b9bad9a193781b472a77aa2c5f84ee296ffc681e07?d=identicon)[EvonDu](/maintainers/EvonDu)

---

Top Contributors

[![EvonDu](https://avatars.githubusercontent.com/u/26706325?v=4)](https://github.com/EvonDu "EvonDu (15 commits)")

### Embed Badge

![Health badge](/badges/evondu-yii2-vue/health.svg)

```
[![Health](https://phpackages.com/badges/evondu-yii2-vue/health.svg)](https://phpackages.com/packages/evondu-yii2-vue)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.6M2.9k](/packages/craftcms-cms)[yiisoft/yii2-app-advanced

Yii 2 Advanced Project Template

1.7k960.6k5](/packages/yiisoft-yii2-app-advanced)[yiisoft/yii2-redis

Redis Cache, Session and ActiveRecord for the Yii framework

44912.1M264](/packages/yiisoft-yii2-redis)[yiisoft/yii2-httpclient

HTTP client extension for the Yii framework

43011.4M323](/packages/yiisoft-yii2-httpclient)[yiisoft/yii2-debug

The debugger extension for the Yii framework

20324.2M616](/packages/yiisoft-yii2-debug)[yiisoft/yii2-app-basic

Yii 2 Basic Project Template

6761.8M8](/packages/yiisoft-yii2-app-basic)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)