前端开发 - 前端开发实例

使用纯HTML静态页面开发

直接在 blade 页面中编写HTML代码即可，如下所示

@extends('modstart::layout.frame')
@section('pageTitle'){{'页面标题'}}@endsection
@section('body')
    
        页面内容
    
@endsection

使用Vue非编译模式

在 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

使用Vue编译模式

在 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