Laravel 实战开发知乎：使用 Vuejs 组件化

老大，问一下你那个下载完后的vue-resource是在哪个文件引入的？app.js?还是bootstrap.js

不是这个意思，我的意思是vue是什么时候引入到html里的

没发现哪里写的不对？目前就是不确定是不是es6语法引起的？
你这里的command 什么意思
视频中操作两大部分：
1、调入es6语法
2、编辑和注册组件
最后执行 gulp

创建组件
<template>
    <button 
        class="btn btn-default"
        v-text="text"
    ></button>
</template>

<script>
    export default {
        mounted() {
            this.$http.post('/api/question/follower',{})
            .then(response=>{
                console.log(response.data);
            })
        },
        data() {
            return {
                followed: false
            }
        },
        computed: {
            text() {
                return this.followed ? '已关注' ：'关注该问题'
            }
        }
    }
</script>

注册组件

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));
Vue.component('question-follow-button', require('./components/QuestionFollowButton.vue'));

const app = new Vue({
    el: '#app'
});

gulpfile.js 在phpStrom里提示错误

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

组件里的确有个字符的问题，改后，组件使用正常。
虽然组件使用正常了，但是前天遇到 的报错又在控制台里出现了？？
Laravel和前端那些事 视频里面没有遇到这种问题
报错如下：

app.js:164 [Vue warn]: Error compiling template:

<div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="http://www.zt.com">
                        Laravel
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                        &nbsp;
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                                                    <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    lg23 <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="http://www.zt.com/logout" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="http://www.zt.com/logout" method="POST" style="display: none;">
                                            <input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
                                        </form>
                                    </li>
                                </ul>
                            </li>
                                            </ul>
                </div>
            </div>
        </nav>

        <!-- 配置文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.zt.com/vendor/ueditor/ueditor.all.js"></script>
<script>
    window.UEDITOR_CONFIG.serverUrl = '/ueditor/server'
</script><div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    为什么你总是让我失望
                                            <a class="topic pull-right" href="/topic/1">php</a>
                                            <a class="topic pull-right" href="/topic/19">Route</a>
                                    </div>

                <div class="panel-body content">
                    <p>现在社会压力大，科技智能让人何去何从，科技发展对人类真的有益。</p>
                </div>
                <div class="edit-actions">
                                            <span class="edif"><a href="/questions/7/edit">编 辑</a></span>
                        <form action="/questions/7" method="post" class="delete-form">
                            <input type="hidden" name="_method" value="DELETE">
                            <input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
                            <button class="button is-naked delete-button">删 除</button>
                        </form>
                                    </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading question-follow">
                    <h2>1</h2>
                    <span>关注者</span>
                </div>
                <div class="panel-body">
                <!--                     <a href="/question/7/follow" class="btn btn-default btn-success">
                        已关注
                    </a>
                 -->
                <question-follow-button></question-follow-button>
                    <a href="#editor" class="btn btn-primary">撰写答案</a>
                </div>
            </div>
        </div>
        <div class="col-md-8 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    2个回复
                </div>

                <div class="panel-body">
                                            <div class="media">
                            <div class="media-left">
                                <a href="">
                                    <img class="top-margin" width="36" src="/images/avatart/user.png" alt="lg23">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading top-margin">
                                    <a href="/user/lg23">
                                        lg23
                                    </a>
                                </h4>
                                <p>除了努力，还是努力！</p>
                            </div>
                        </div>
                                            <div class="media">
                            <div class="media-left">
                                <a href="">
                                    <img class="top-margin" width="36" src="/images/avatart/user.png" alt="lg23">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading top-margin">
                                    <a href="/user/lg23">
                                        lg23
                                    </a>
                                </h4>
                                <p>镇妮同学，你为什么老是口事心非？？？</p>
                            </div>
                        </div>
                                                            <form action="/questions/7/answer" method="post">
                        <input type="hidden" name="_token" value="7lDAmYX8rUc1F2wwUN9DT6IMKs8rq6vzu1JtL0MI">
                        <div class="form-group">
                            <!-- 编辑器容器 -->
                            <!-- 非转义可能引起攻击,需要过滤 -->
                            <script id="container" name="body" type="text/plain" style="height:120px;">
                                
                            </script>
                                                    </div>
                        <button class="btn btn-success pull-right" type="submit">提交回复</button>
                    </form>
                                    </div>
            </div>
        </div>
    </div>
</div>

    </div>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
 
(found in <Root>)warncompileToFunctionsVue$3.$mountVue._initVue$3(anonymous function)(anonymous function) @ app.js:164__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67

没注意过，这个style 是可以设置的吧，你改一下就好

好的，谢谢！
我再试试

$ npm install
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp Do     S issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp Do     S issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7     .0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in t     he tree.
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN prefer global marked@0.3.6 should be installed with -g
npm WARN prefer global node-gyp@3.6.0 should be installed with -g

> node-sass@3.13.1 install F:\vagrant\lnmp\zt360\admin\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\lenovo\AppData\Roaming\npm-cache\node-sass\3.13.1\win32-x64-48_bindin     g.node

> node-sass@3.13.1 postinstall F:\vagrant\lnmp\zt360\admin\node_modules\node-sass
> node scripts/build.js
...
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\f     sevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"     darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

执行npm install 时 有上面一些警告，不知道是否有影响
执行gulp 后结果：

$ gulp
[15:13:51] Using gulpfile F:\vagrant\lnmp\zt360\admin\gulpfile.js
[15:13:51] Starting 'all'...
[15:13:51] Starting 'sass'...
[15:13:52] Finished 'sass' after 1.8 s
[15:13:52] Starting 'webpack'...
[15:13:55]
[15:13:55] Finished 'webpack' after 2.1 s
[15:13:55] Finished 'all' after 3.91 s
[15:13:55] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬───────────────────     ─┐
│ Task          │ Summary                       │ Source Files                   │ Destination             │
├───────────────┼───────────────────────────────┼────────────────────────────────┼───────────────────     ─┤
│ mix.sass()    │ 1. Compiling Sass             │ resources\assets\sass\app.scss │ public\css\app.css      │
│               │ 2. Autoprefixing CSS          │                                │                         │
│               │ 3. Concatenating Files        │                                │                         │
│               │ 4. Writing Source Maps        │                                │                         │
│               │ 5. Saving to Destination      │                                │                         │
├───────────────┼───────────────────────────────┼────────────────────────────────┼───────────────────     ─┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources\assets\js\app.js     │ public\js\app.js        │
│               │ 2. Writing Source Maps        │                                │                         │
│               │ 3. Saving to Destination      │                                │                         │
└───────────────┴───────────────────────────────┴────────────────────────────────┴───────────────────     ─┘
[15:13:55] Finished 'default' after 9.04 ms

命令行结果正常，但浏览器控制台返回的报错还是一样？

Example.vue 文件没改过，Laravel 5.3， vuejs

 "vue": "^1.0.26",
    "vue-resource": "^0.9.3"

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('example', require('./components/Example.vue'));
Vue.component('question-follow-button', require('./components/QuestionFollowButton.vue'));

const app = new Vue({
    el: 'body'
});

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('./select2.min');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

生成的

<p "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);>地方官梵蒂冈梵蒂冈的</p>

类似于这样子，然后button的样式就引用不到questionFollowButton.vue的内容