Vue.js如何在Laravel封装组件

我在public目录使用bower安装vue.js

使用<script src="{{ asset ("/bower_components/vue/dist/vue.js") }}" type="text/javascript"></script>引入vue.js

在某个blade模板封装了以下代码:

<script type="text/x-template" id="orders-template">
        <table class="table table-hover">
            <tr>
                <th>订单编号</th>
                <th>购买商品</th>
                <th>优惠金额</th>
                <th>订单金额</th>
                <th>用户信息</th>
                <th>订单时间</th>
                <th>订单状态</th>
                <th>用户操作</th>
            </tr>
            <tr v-for="(index,item) in orders | filterBy orderno in 'orderno'">
                <td>@{{ item.orderno }}</td>
                <td>
                    <p v-for="(key,object) in item.subject | json_decode">
                        @{{ object.num + '份' }}
                        @{{ object.title }}
                        @{{ '&yen;' + object.price }}
                    </p>
                </td>
                <td>
                    <p>@{{ item.has_one_voucher.title ? '优惠卡券:' + item.has_one_voucher.title : '' }}</p>

                    <p>@{{ item.activity_discount ? '活动优惠&yen;:' + item.activity_discount : '' }}</p>

                    <p>@{{ item.blance_money ? '使用余额:&yen;' + item.blance_money : '' }}</p>
                </td>
                <td>
                    @{{ '&yen;' + item.total_fee }}
                </td>
                <td>
                    <p>@{{ '编号:' + item.uid }}</p>

                    <p>@{{ '姓名:' + item.realname }}</p>

                    <p>@{{ '手机:' + item.tel }}</p>

                    <p>@{{ '地区:' + item.addr3 }}</p>
                </td>
                <td>
                    <p>@{{ item.create_time | date '用户下单时间:'}}</p>

                    <p>要求送达时间:@{{ item.reciveTime }}</p>

                    <p>@{{ item.delivery_time ? item.delivery_time : '' | date '送货完成时间:'}}</p>
                </td>
                <td>
                    @{{ item.opstatus }}
                </td>
                <td>
                    <button type="button" class="btn btn-primary">编辑订单</button>
                </td>
            </tr>
        </table>
    </script>

我觉得在blade模板里面封装组件模板太臃肿了，有没有办法可以将vue.js组件模板和blade模板分离出来

谢谢

---

Laracasts / Skills / Javascripti / The Vast World of Vue.js 0.12 / 9. Workflow with Browerify and Elixir

上述教程详细说明了如何在 Laravel 中使用 Vue.js

https://laracasts.com/series/learning-vu...