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