Thinkphp logo Vue logo Twig logo

tp-vue

介绍

基于php后端渲染的thinkphp+vue框架。

采用twig模板引擎渲染。

框架版本为thinkphp5.1和vue@2.6.10。

php版本要求7.0+。

快速开始

git clone git@github.com:yuchanns/tp-vue.git
cd tp-vue
composer install
php think run
1
2
3
4

使用方法

继承模板

你的主页面需要使用继承的方式进行编写:

{% extends library('base/base') %}

{% macro template() %}
  <div>
    <!-- 此处编写你的html -->
  </div>
{% endmacro %}

{% block default %}
  {% from _self import template %}
  <script>
    const App = {
      // 此处编写你的js
      template: '${tiny(template())}'
    }
  </script>
{% endblock %}

{% block style %}
  <style>
    /* 此处编写你的style */
  </style>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

编写组件

使用twig模板引擎的宏功能编写你的组件:

{% macro template() %}
  <div>
    <!-- 此处编写你的组件html -->
  </div>
{% endmacro %}

<script>
  export default {
    {% macro default() %}
    {% from _self import template %}
    
    // 此处编写你的组件js
    template: '${tiny(template())}'
    {% endmacro %}
  }
</script>
{% macro style() %}
  <style>
    /* 此处编写你的组件style */
  </style>
{% endmacro %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

调用组件

使用twig模板引擎的import功能引入组件和组件样式:

{% extends library('base/base') %}

{% macro template() %}
  <div>
    <p>在下面使用组件</p>
    <HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>
  </div>
{% endmacro %}

{% block default %}
  {% from _self import template %}
  <!-- 在下面引入组件的js -->
  {% from library('index/components/HelloWorld') import default as HelloWorld %}
  <script>
    const App = {
      components: {
        // 在下面注册组件,使用tinyj模板函数压缩代码
        HelloWorld: {${tinyj(HelloWorld())}}
      },
      template: '${tiny(template())}'
    }
  </script>
{% endblock %}

{% block style %}
  <!-- 在下面引入组件的样式并使用 -->
  {% from library('index/components/HelloWorld') import style as HelloWorld %}
  ${HelloWorld()}
  <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
  </style>
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

注意:引用组件需要在块或宏的作用域内进行才有效果!

支持组件嵌套引用组件。

模板函数

  • ${tiny()}:压缩html和css代码
  • ${tinyj()}:压缩js代码
  • ${static_url()}:引用静态资源
  • ${library()}:获取模板文件/组件路径

可在./extend/twig/Functions.php中自行添加自定义模板函数