我总是设置一个根(新的Vue),然后添加组件。然后在我的视图中,我使用当时需要的组件。例如:
// gulp.js:我的构建工具
var elixir = require('laravel-elixir');
var paths = require('./resources/paths.js');
var config = require('./resources/config.js');
elixir.config.publicPath = paths.public;
elixir(function(mix) {
mix
.copy('resources/assets/images',paths.images)
.copy('resources/assets/vendors/bootstrap-colorpicker/img',paths.images)
.copy('node_modules/simple-line-icons/fonts',paths.fonts)
.copy('node_modules/bootstrap/fonts',paths.fonts+'/bootstrap')
.styles(paths.vendor.css, paths.css+'/vendor.css')
.scripts(paths.vendor.js, paths.scripts+'/vendor.js')
.sass('app.scss')
.babel('app.js')
.browserify('app.js')
.version(paths.versioned)
.browserSync(config.browsersync);
});
//我的app.js
var Vue = require('vue');
var VueResource = require('vue-resource');
// Load resources into Vue
Vue.use(VueResource);
// Load store
var Store = require('./store');
// Set Vue to debug state
Vue.config.debug = true;
// Set the headers
Vue.http.headers.common['X-CSRF-TOKEN'] = Greenchoice.csrfToken;
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('id_token');
// Components
new Vue({
el: 'body',
data: Store,
data() {
return {
'store': Store
}
},
ready() {
this.store.router = this.$http;
this.$broadcast('application-ready');
},
components: {
'specialtype-builder': require('./components/specialtypes/specialtype-builder'),
'fieldgroup-builder': require('./components/fieldgroups/fieldgroup-builder')
}
});
//我的模板
@extends('layouts.app')
@section('content')
<div class="container spark-screen">
<div class="row">
<div class="col-md-12">
<!-- MY COMPONENT -->
<specialtype-builder :store="store" :uuid="'{!! $specialtype->id !!}'" />
</div>
</div>
</div>
@endsection
我的问题
上面的视图是通过Turbolinks加载的。 https://github.com/turbolinks/turbolinks
我如何让它运作?任何经历?此时,组件未启动。