lg23

668 经验值

群主,在执行gulp后报错,问题可能性缩小到gulpfile.js文件中 .webpack('app.js') 部分
如果删除这部分,命令行运行正常,浏览器控制台也不会出现任何错误提示
声明,近几次的反复尝试,没有添加任何样式合并文件。
其中 resources/assets/js/app.js应该是vue自带的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

没发现哪里写的不对?目前就是不确定是不是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');
});

这里我添加 button 组件,但是没有显示show视图里没有显示这个按钮
另外,组件已经注册 执行了gulp ,代码中也没有任何错误提示?
好像执行gulp时有报错,这个报错看不懂??

[22:34:49] Using gulpfile F:\vagrant\lnmp\zt360\admin\gulpfile.js
[22:34:49] Starting 'all'...
[22:34:49] Starting 'sass'...
[22:34:57] Finished 'sass' after 7.51 s
[22:34:57] Starting 'webpack'...
{ [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./                                     resources/assets/js/components/QuestionFollowButton.vue
Module build failed: SyntaxError: Unexpected token (18:27)
    at Parser.pp$4.raise (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node_mo                                     dules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node                                     _modules\acorn\dist\acorn.js:603:10)
    at Parser.pp.expect (F:\vagrant\lnmp\zt360\admin\node_modules\buble\node_mod                                     ules\acorn\dist\acorn.js:597:28)
    at Parser.parseObj (F:\vagrant\lnmp\zt360\admin\node_modules\buble\dist\bubl                                     e.umd.js:727:18)
    at Parser.pp$3.parseExprAtom (F:\vagrant\lnmp\zt360\admin\node_modules\buble                                     \node_modules\acorn\dist\acorn.js:1805:19)
    at Parser.parseExprAtom (F:\vagrant\lnmp\zt360\admin\node_modules\buble\dist                                     \buble.umd.js:656:26)
    at Parser.pp$3.parseExprSubscripts (F:\vagrant\lnmp\zt360\admin\node_modules                                     \buble\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (F:\vagrant\lnmp\zt360\admin\node_modules\bub                                     le\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (F:\vagrant\lnmp\zt360\admin\node_modules\buble\                                     node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (F:\vagrant\lnmp\zt360\admin\node_modul                                     es\buble\node_modules\acorn\dist\acorn.js:1620:21)
 @ ./resources/assets/js/components/QuestionFollowButton.vue 5:18-114
 @ ./resources/assets/js/app.js]
  message: './~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!                                     ./resources/assets/js/components/QuestionFollowButton.vue\nModule build failed:                                      SyntaxError: Unexpected token (18:27)\n    at Parser.pp$4.raise (F:\\vagrant\\ln                                     mp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\acorn.js:2221:                                     15)\n    at Parser.pp.unexpected (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\                                     \buble\\node_modules\\acorn\\dist\\acorn.js:603:10)\n    at Parser.pp.expect (F:                                     \\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\a                                     corn.js:597:28)\n    at Parser.parseObj (F:\\vagrant\\lnmp\\zt360\\admin\\node_m                                     odules\\buble\\dist\\buble.umd.js:727:18)\n    at Parser.pp$3.parseExprAtom (F:\                                     \vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\ac                                     orn.js:1805:19)\n    at Parser.parseExprAtom (F:\\vagrant\\lnmp\\zt360\\admin\\n                                     ode_modules\\buble\\dist\\buble.umd.js:656:26)\n    at Parser.pp$3.parseExprSubs                                     cripts (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_modules\\acor                                     n\\dist\\acorn.js:1715:21)\n    at Parser.pp$3.parseMaybeUnary (F:\\vagrant\\lnm                                     p\\zt360\\admin\\node_modules\\buble\\node_modules\\acorn\\dist\\acorn.js:1692:1                                     9)\n    at Parser.pp$3.parseExprOps (F:\\vagrant\\lnmp\\zt360\\admin\\node_modul                                     es\\buble\\node_modules\\acorn\\dist\\acorn.js:1637:21)\n    at Parser.pp$3.pars                                     eMaybeConditional (F:\\vagrant\\lnmp\\zt360\\admin\\node_modules\\buble\\node_mo                                     dules\\acorn\\dist\\acorn.js:1620:21)\n @ ./resources/assets/js/components/Quest                                     ionFollowButton.vue 5:18-114\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

另外视频中调出es6语法的快捷键是什么?

这里用Repository模式, 同我之前用的service+store层差不多,我原来的service层专门处理代码逻辑,store执行数据库操作

public function topics()
    {
        return $this->belongsToMany('App\Models\Topic')->withTimestamps();
    }

这里有问题,我至于具体是哪?我也不知道,我从文档中复制了这句就对了?
当然 Topic::calss 也是正确的

Question::where('id',$id)->first();
这 样是没有问题的
其实很多东西我都学过,只是理解不深刻或是没记住。我会抓紧时间看群主的视频,比我以前学习的例子好很多。

http://www.zt.com/questions/2
浏览器输入上面内容时,出现下面报错:
Call to undefined relationship [topics] on model [App\Models\Question].
检查控制器及model没发现问题
Question model

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Question extends Model
{
    protected $fillable = ['title', 'body', 'user_id'];

    /**
     * 定义多对多关系
     */
    public function topics()
    {
        return $this->belogsToMany(Topic::class)->withTimestamps();
    }
}

QuestionsController 控制器

public function show($id)
    {
        // 使用 with 方法指定想要预载入的关联对象 预载入可以大大提高程序的性能
        // 这里的 topics 是App\Models\Question 中的 topics 的方法
        $question = Question::where('id',$id)->with('topics')->get();

        // compact 创建一个包含变量名和它们的值的数组
        return view('questions.show',compact('question'));
    }

你这里如果没有从后台返回数据,前端用户输入的数据会生成话题吗?我这里从后台返回话题数据正常,但生成话题却不行?

我基础差,有很多不足,我目前想先按自己基础水平跟着实战项目走遍,然后记录下所有的问题,这样子我觉得学习会更直接全面些。很多时候都是盲目在学,也不了解实际运用。多有烦扰,请见谅!