Question

我已经在Laravel 5中创建了集成了模板的网站。现在，我想在我的网站中添加聊天功能，所以我决定使用Vue.js。问题是，当我在项目中设置Vue.js时，使用vue.js的页面的页面模板不起作用。我的意思是laravel的所有css和js文件都弄乱了。页面看起来很恐怖。如何在Vue.js中使用现有模板？

<head>
  <link rel="stylesheet" href="{{ URL('css/style.css?version=2') }}" />
  <link rel="stylesheet" href="{{ URL::asset('css/ionicons.min.css') }}" />
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
        <div id="custom-search-input">
           <div class="input-group col-md-12">
              <input type="text" class="  search-query form-control" placeholder="Conversation" />
              <button class="btn btn-danger" type="button">
              <span class=" glyphicon glyphicon-search"></span>
              </button>
           </div>
        </div>
        <div id="app">
            <example-component></example-component>
        </div>
        <div class="dropdown all_conversation">
           <button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-weixin" aria-hidden="true"></i>
           All Conversations
           <span class="caret pull-right"></span>
           </button>
           <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
              <li><a href="#"> All Conversation </a>  <ul class="sub_menu_ list-unstyled">
              <li><a href="#"> All Conversation </a> </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
           </ul>
           </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
           </ul>
        </div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>

ExampleComponent.vue

    <template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Console warnings and errors

如何将laravel模板与Vue.js集成

0 个答案: