PHPackages                             evondu/yii2-vue-adminlte - 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. [Admin Panels](/categories/admin)
4. /
5. evondu/yii2-vue-adminlte

ActiveLibrary[Admin Panels](/categories/admin)

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

Yii2中使用AdminLte并进行vue组件化

2.1.6(4y ago)241299MITPHP

Since Aug 9Pushed 4y ago1 watchersCompare

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

READMEChangelog (10)Dependencies (2)Versions (21)Used By (0)

yii2-vue-adminlet
=================

[](#yii2-vue-adminlet)

项目介绍
----

[](#项目介绍)

在Yii项目中添加Vue，Vuex进行视图开发，用AdminLte进行Vue组件化后构建Layout和基础组件，导入ElmentUi组件库，并提供Gii的CRUD模板。

安装方法
----

[](#安装方法)

`composer require evondu/yii2-vue-adminlte`

配置方法
----

[](#配置方法)

#### 配置布局

[](#配置布局)

- 配置布局：`yiilte\YiiLte::layout('main')`
    - 如：`'layout' => yiilte\YiiLte::layout('main')`
    - 高级应用模板中配置文件为：`app/config/main.php`
- 配置空白布局：`yiilte\YiiLte::layout('space')`
    - 如：`'layout' => yiilte\YiiLte::layout('space')`

#### 配置布局信息

[](#配置布局信息)

- 新建配置文件：
    - 如：`app/config/adminlte.php`
    - 配置内容可以使用全局属性或通过函数返回等，如用户名:`Yii::$app->user->identity->username`

```

```

#### 配置GII的CRUD生成器

[](#配置gii的crud生成器)

- 配置Yii的Gii模块，如:

```
return [
    ……
    'modules' => [
        'gii'=>[
            'class' => 'yii\gii\Module',
            'generators' => [
                'crud' => [
                    'class' => 'yii\gii\generators\crud\Generator',
                    'templates' => [
                        'yiilte' => yiilte\YiiLte::template(),
                    ]
                ]
            ],
        ]
    ]
    ……
]

```

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

[](#yii与vue结合使用)

#### 变量转化

[](#变量转化)

- 本库中提供将PHP变量转化成JavaScript变量的辅助函数，变量转化后可以便于Vue对其进行操作
- 布尔型会被处理成字符串的1和0，目的是适配Yii的表单传值和处理
- 实现方式为使用`yii\web\View`中的`registerJs`函数，把变量定义到JavaScript中
- 变量转换使用`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的视图层使用）：

```

    new Vue({
        el:'#app',
        data:{}
    })

```

项目架构
----

[](#项目架构)

```
src
    assets/                 Yii的Asset类
    layouts/                Yii的布局文件
    lib/                    辅助类库
    static/                 静态资源
        adminlte/           AdminLet的静态资源
        components/         AdminLte的Vue组件
        element/            Element的静态资源
    template/               Gii的Crud模板
    widgets/                Yii的Widget扩展

```

参与贡献
----

[](#参与贡献)

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

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity71

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 ~55 days

Recently: every ~150 days

Total

20

Last Release

1772d ago

Major Versions

0.2.1 → 1.0.02018-12-28

1.2.0 → 2.0.02019-08-16

### 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 (79 commits)")

### Embed Badge

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

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

###  Alternatives

[fancyecommerce/fec_admin

fancy ecommerce

6312.1k1](/packages/fancyecommerce-fec-admin)

PHPackages © 2026

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