QQ扫一扫联系
直接在 blade 页面中编写HTML代码即可，如下所示
@extends('modstart::layout.frame')
@section('pageTitle'){{'页面标题'}}@endsection
@section('body')
<div>
页面内容
</div>
@endsection
在 blade 页面中编写 HTML 代码，然后使用 Vue 进行数据绑定，如下所示
@extends('modstart::layout.frame')
@section('pageTitle'){{'Vue非编译模式'}}@endsection
@section('bodyAppend')
<script src="@asset('asset/vendor/vue.js')"></script>
<script src="@asset('asset/vendor/element-ui/index.js')"></script>
<script>
$(function () {
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
doTest() {
this.count ++;
}
}
});
});
</script>
@endsection
@section('body')
<div id="app" v-cloak>
<el-button @click="doTest">点击测试</el-button>
<div>点击次数：{{count}}</div>
</div>
@endsection
在 blade 页面中编写HTML框架代码，使用Vue组件的方式完成页面开发。
blade 文件：module/Xxx/View/test.blade.php
@extends('modstart::layout.frame')
@section('pageTitle'){{'Vue编译模式'}}@endsection
@section('bodyAppend')
<script src="@asset('asset/vendor/vue.js')"></script>
<script src="@asset('asset/vendor/element-ui/index.js')"></script>
<script src="@asset('vendor/Xxx/entry/test.js')"></script>
@endsection
@section('body')
<div id="app"></div>
@endsection
vue 入口文件 module/Xxx/resources/asset/src/entry/test.js
import {VueManager} from "@ModStartAsset/lib/vue-manager";
VueManager.QuickMount('#app', '<test />', require('./../pages/Test.vue').default)
vue 页面 module/Xxx/resources/asset/src/pages/Test.vue
<template>
<div>
<el-button @click="doTest">点击测试</el-button>
<div>点击次数：{{count}}</div>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
count: 0
}
},
methods: {
doTest() {
this.count ++;
}
}
}
</script>
该模式下页面需要实时编译调试，具体可参考前端代码如何编译章节。
# 进入到模块静态资源根目录
cd module/Xxx/resources/asset/
# 安装依赖
cnpm install
# 开发模式：打包前端JS单页静态资源，边开发边刷新
webpack --env dev --watch
# 生产模式：打包前端JS单页静态资源
webpack
