!!!!转载请注明作者和本文链接!!!!
PS:本文假设你已经建好了laravel工程,有一点blade模板和vue的基础
直接上步骤!
1.首先我们在 "工程目录/ resources/assets/js/components" 目录下新增一个Vue组件(也就是增加一个.vue文件)
比如Welcome.vue:
<template>
<div id="welcome">
<div>欢迎</div>
</div>
</template>
<script>
//这里写本组件的js代码
</script>
<style lang="scss">
//这里写css
</style>
2.去"工程目录/ resources/assets/js/app.js"里注册组件
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('welcome', require('./components/Welcome.vue')); //在这里添加注册,第一个是组件名,第二个参数是组件路径
const app = new Vue({
el: '#app'
});
3.在blade模板里面加入一个id为app的标签,并在标签里面使用的组件名
@extends('Base.base')
@section('title','欢迎')
@section('pageStyle')
@stop
@section('content')
<div id="app"> <!--这里id为app,因为第二步app.js里面new Vue时用的el参数就是app-->
<welcome></welcome> <!--这里就是我们第二步注册的welcome-->
</div>
@stop
@section('pageScript')
@stop
然后就OK了!!!
!!!!转载请注明作者和本文链接!!!!