非你网

操作一波

php artisan ui vue

yarn --no-bin-links

js/components/ 下会生一个 ExampleComponent.vue 文件。

js/app.js 中也引入了这个。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

然后再 blade 模板中使用

xxx.blade.php

        <main class="py-4">
            <example-component inline-template>

            </example-component>

            @yield('content')
        </main>

下边来一个 vue 中定义数据， blade 中写结构的搞法

第一步，定义 vue。在 js/components/ 下，生一个CarColor.js：

Vue.component('car-color', {
    // 定义组件的属性
    props: {
        initValue: {
            type: Array, // 格式是数组
            default: () => ([]), // 默认是个空数组
        }
    },
    // 定义了这个组件内的数据
    data() {
        return {
            colorIndex: '',
            colorLabel: '',
            colors: ['red', 'yellow', 'blue']
        };
    },
    // 定义观察器，对应属性变更时会触发对应的观察器函数
    watch: {
        // 当选择的省发生改变时触发
        colorIndex(newVal, oldVal) {
            console.log('watch -> ', newVal, oldVal)
            if (newVal >= 0) {
                this.colorLabel = this.colors[this.colorIndex]
            }
        }
    },
    // 组件初始化时会调用这个方法
    created() {
        this.initialize(this.initValue)
    },
    methods: {
        initialize(value) {
            if(!value || value.length == 0)
                return

            this.colors = value
        }
    }
})

然后在 js/app.js 中 require 进来。

require('./components/CarColor')

再建立一个 views/pages/color.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div>
        <form>
            <!-- inline-template 代表通过内联方式引入组件 -->
            <car-color inline-template>
            <div class="form-group">
                <label for="colorSelect">颜色： @{{ colorLabel }} </label>
                <select class="form-control" id="colorSelect" v-model="colorIndex">
                    <option value="">选择颜色</option>
                    <option v-for="(item, index) in colors" :value="index">@{{ item }}</option>
                </select>
                <input type="hidden" name="color" v-model="colorLabel">
            </div>
            </car-color>
        </form>
    </div>
</div>
@endsection

最后，在路由这里，定一个一个访问路由

Route::get('/color', function(){
    return view('pages/color');
});

执行 npm run watch-poll,访问 http://jk.cn/color 看看，是不是渲染出来了。

这样操作，看需要，看场景。需要就做，不需要，就纯净的用 bootstrap

下一步

想要更完美，更漂亮。我们需要去完善 layout/app.blade.php ，这个 blade 模板还是很好用的，可以继承，还可以重写。舒服的不要不要的。不过这里不想去弄，正式项目，我才会花心思在这里。所以下一步处理角色，权限问题。这个和 vue element admin 结合好了，就很好了。