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

楼主,想问下,你用什么来调试的,我一直的是用var_dump(),想请问您有什么好的调试,

mostwin 回复 @zyzplzyz

dd( );

775397252 回复 @zyzplzyz

xdebug

newborn

教主,我想问下组件化开发的一个问题,
就是button按钮组件化后, 组件内的值发生变化了,如何修改父组件传递的那个值?现在2.X版本不支持prop同步了

JellyBool 回复 @newborn

如何修改父组件传递的那个值?

这个什么意思?是要修改 question ,这个传进来的值?

xiaofengzhi 回复 @JellyBool

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

JellyBool 回复 @xiaofengzhi

问一下你那个下载完后的vue-resource ?

这是什么?

xiaofengzhi 回复 @JellyBool

我是在app.js文件使用的vue-resource。
import VueResource from 'vue-resource';

window.Vue.use(VueResource);

chenxin 回复 @newborn

用Vuex解决

zyzplzyz

v-bind:class="{'btn-success':followed}"

l


这个无法正确显示,是怎么回事,群主,我的followed返回是true

zyzplzyz

Regex

Hide network messages
All
Errors
Warnings
Info
Logs
Debug
Handled

(unknown) You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
3
(unknown) [Vue warn]: 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.
(unknown) Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

nanibigoo 回复 @zyzplzyz

请问 development mode怎么解决的???

zyzplzyz

我这个unknown是怎么回事,群主

zyzplzyz

群主,问题解决了,新年快乐

kissgxd

我是vue入门,想顺便学习下,问下这个vue是什么时候引入的呢?直接script引入了app.js就行了么?还是说要先引用vue.js,然后引入app.js 剩下的就.vue里编js代码就行了?

JellyBool 回复 @kissgxd

npm 直接安装的。

kissgxd 回复 @JellyBool

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

JellyBool 回复 @kissgxd

都打包到 app.js 了啊,直接在 app.blade.php 引入:

 <script src="/js/app.js"></script>
laixiaojie

群主,想问一下,show视图中用Auth那么没登录访问这个页面不就报错了吗..

JellyBool 回复 @laixiaojie

先判断一下就可以了,后面会说这个的。。。小细节

hcweb

群主您好 请问组件无法注入是怎么回事?

(found in component <delete-menu-type-button> at E:\wamp\www\laravel\resources\assets\js\components\admin\DeleteMenuTypeButton.vue)

Vue.component('delete-menu-type-button',require('./components/admin/DeleteMenuTypeButton.vue'));

求解 感谢 折腾好久了!

JellyBool 回复 @hcweb

具体的报错是什么?

bqx619

已解决

你好,有一个问题,在laravel 5.4下,使用mix,Vue总是会在Console报

Uncaught TypeError: Cannot read property 'post' of undefined

QuestionFollowButton.vue

 mounted() {
            this.$http.post('/api/question/follower',{'question': this.question,'user': this.user}).then(response => {
                this.followed = response.data.followed
            })
        },
JellyBool 回复 @bqx619

5.4 用 axios 了吧。直接使用 axios.post()

saloou

楼主,我有个问题请教一下,为什么 我的Example.vue文件打开后 字体都是白色的,而且输入也没有任何提示?

JellyBool 回复 @saloou

装个 vuejs 的插件试试

tangzw

这个视频支持单独购买吗

JellyBool 回复 @tangzw

暂时不支持..谢谢。后面再看看

lg23

这里我添加 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语法的快捷键是什么?

JellyBool 回复 @lg23
 SyntaxError: Unexpected token

语法错误

es6语法的快捷键是 command ,

lg23 回复 @JellyBool

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

组件里的确有个字符的问题,改后,组件使用正常。
虽然组件使用正常了,但是前天遇到 的报错又在控制台里出现了??
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
fsdstar 回复 @lg23

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.

他这个是提示你不要再模板中使用<!---->这样的注释符号

北漂张小白 回复 @fsdstar

不是吧??胡说八道!

fsdstar 回复 @lg23

第一你使用了,第二laravel模板自带了注释

<!-- CSRF Token -->
    <meta name="csrf-token" content="entBa7TCDjfLNFkDGFvLG9M0tAR5waC5IRrlnili">

    <title>Laravel</title>

    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">

    <!-- Scripts -->
WannaProGrammer 回复 @fsdstar

我把注释全都去掉了 还是这样报错。。。

fsdstar 回复 @WannaProGrammer

(๑°ㅁ°๑)‼(惊讶脸)

justudy 回复 @lg23

遇到同样这个问题,你有解决吗

北漂张小白 回复 @justudy

遇到同样这个问题,你有解决吗

JellyBool 回复 @北漂张小白

去掉视图文件的 内联 style 和 script

北漂张小白 回复 @JellyBool

页面中并没有写内联样式呀!

@extends('layouts.app')

@section('content')
    @include('vendor.ueditor.assets')

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {{ $question->title }}
                        @foreach($question->topics as $topic)
                            <a class="topic pull-right" href="/topic/{{ $topic->id }}">{{ $topic->name }}</a>
                        @endforeach
                    </div>

                    <div class="panel-body content">
                        {!! $question->body !!}
                    </div>

                    <div class="actions">
                        @if(Auth::check() && Auth::user()->owns($question))
                            <span class="edit">
                                <a href="/questions/{{ $question->id }}/edit">编辑</a>
                            </span>
                            <form action="/questions/{{$question->id}}" method="POST" class="delete-form">
                                {{ method_field('DELETE') }}
                                {{ csrf_field() }}
                                <button class="button is-naked delete-button">删除</button>
                            </form>
                        @endif
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading question-follow">
                        <h2>{{ $question->followers_count }}</h2>
                        <span>关注者</span>
                    </div>
                    <div class="panel-body">

                        <question-follow-button></question-follow-button>
                        <a href ="#editor" class="btn btn-primary pull-right">撰写答案</a>
                    </div>
                </div>
            </div>

            <div class="col-md-8 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {{ $question->answers_count }} 个答案
                    </div>

                    <div class="panel-body">
                        @foreach($question->answers as $answer)
                            <div class="media">
                                <div class="media-left">
                                    <a href="">
                                        <img width="36px" src="{{ $answer->user->avatar }}" alt="{{ $question->user->name }}">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        <a href="/questions/{{ $answer->id }}">
                                            {{ $answer->user->name }}
                                        </a>
                                    </h4>

                                    {!! $answer->body !!}
                                </div>
                            </div>

                    @endforeach

                    @if(Auth::check())
                        <!-- 编辑器容器 -->
                        <form action="/question/{{$question->id}}/answer" method="post">
                            {!! csrf_field() !!}

                            <div class="form-group{{ $errors->has('body') ? ' has-error' : '' }}">

                                <script id="container"  name="body" type="text/plain">
                                    {!! old('body') !!}
                                </script>

                                @if ($errors->has('body'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('body') }}</strong>
                                    </span>
                                @endif
                            </div>


                            <button class="btn btn-success pull-right" type="submit">发布</button>
                        </form>

                    @else
                        <a href="{{ url('login') }}" class="btn btn-success btn-block">登录提交答案</a>
                    @endif

                    </div>

                </div>
            </div>
        </div>
    </div>

    @section('bottom-js')
        <!-- 实例化编辑器 -->
        <script type="text/javascript">

            var ue = UE.getEditor('container', {
                toolbars: [
                    ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']
                ],
                elementPathEnabled: false,
                enableContextMenu: false,
                autoClearEmptyNode:true,
                wordCount:false,
                imagePopup:false,
                autotypeset:{ indent: true,imageBlockLine: 'center' }
            });

            $(function(){

                function formatTopic (topic) {
                    return "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" +
                    topic.name ? topic.name : "Laravel"   +
                        "</div></div></div>";
                }

                function formatTopicSelection (topic) {
                    return topic.name || topic.text;
                }

                $(".js-example-basic-multiple").select2({
                    tags: true,
                    placeholder: '选择相关话题',
                    minimumInputLength: 2,
                    ajax: {
                        url: '/api/topics',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term
                            };
                        },
                        processResults: function (data, params) {
                            return {
                                results: data
                            };
                        },
                        cache: true
                    },
                    templateResult: formatTopic,
                    templateSelection: formatTopicSelection,
                    escapeMarkup: function (markup) { return markup; }

                });
            });

        </script>
    @endsection

@endsection
JellyBool 回复 @北漂张小白

你看看你的

@section('bottom-js')
        <!-- 实例化编辑器 -->
        <script type="text/javascript">

这个有没有在 Vue 的那个 #app 里面

北漂张小白 回复 @JellyBool
<body>
    <div id="app">
        
        @yield('content')
        
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
    @yield('bottom-js')
    <script>
        $('#flash-overlay-modal').modal();
    </script>
</body>

上面是app.blade.php文件,这样看来@section('bottom-js')并不在#app里面。
我看视频中的文件@section('js')应该也是这样的,不在#app里面。
我在show.blade.php文件里面去掉@include('vendor.ueditor.assets')就不会报这个错误。

JellyBool 回复 @北漂张小白
@extends('layouts.app')
 @include('vendor.ueditor.assets')
@section('content')
   

这样试试

北漂张小白 回复 @JellyBool

嗯,这样可以,但是不明白为什么!!谢谢jelly!!

JellyBool 回复 @北漂张小白

因为这个 @include('vendor.ueditor.assets') 包含了 script 标签

北漂张小白 回复 @JellyBool

嗯,明白了!非常感谢!

Ming Zhou 回复 @lg23

你是不是执行了phpstorm的格式化,然后

<pre>
this.$http.post('/api/question/follower', {'question': this.question, 'user':this.user}).then(respose => {

    console.log(respose.data);
})

</pre>

这里面response后面的箭头从 => 被格式化成 = >

JellyBool 回复 @Ming Zhou

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

lg23

群主,在执行gulp后报错,问题可能性缩小到gulpfile.js文件中 .webpack('app.js') 部分
如果删除这部分,命令行运行正常,浏览器控制台也不会出现任何错误提示
声明,近几次的反复尝试,没有添加任何样式合并文件。
其中 resources/assets/js/app.js应该是vue自带的js文件,之前的错误和当下的错误应该都是由它引起的,但不知道为什么群主视频中却没有这样的错误出现?

JellyBool 回复 @lg23

删除 node_modules/ 重新 npm install 吧。估计是你的环境有问题

lg23 回复 @JellyBool

好的,谢谢!
我再试试

lg23 回复 @JellyBool
$ 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?dd4e:5[vue-loader] resources/assets/js/components/Example.vue: named exports in *.vue files are ignored.(anonymous function) @ Example.vue?dd4e:5(anonymous function) @ app.js:301__webpack_require__ @ app.js:20(anonymous function) @ app.js?8b67:17(anonymous function) @ app.js:588__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
QuestionFollowButton.vue?4972:5[vue-loader] resources/assets/js/components/QuestionFollowButton.vue: named exports in *.vue files are ignored.(anonymous function) @ QuestionFollowButton.vue?4972:5(anonymous function) @ app.js:307__webpack_require__ @ app.js:20(anonymous function) @ app.js?8b67:18(anonymous function) @ app.js:588__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.common.js?e881:10233 Download the Vue Devtools for a better development experience:
https://github.com/vuejs/vue-devtools

我在console.log(response.data); 的时候 没有出现任何内容, 出现两个warning, 好像API也没有调用似的, show页面里 显示的正常,gulp 也正常 不知道什么问题

<script>
    export default {
        props:['question','user'],
        mounted() {
            this.$http.post('/api/question/follower',{'question':this.question,'user':this.user}).then( response => {
                console.log(response.data);
            });
        },
        data() {
           return {
               followed :false,
           }
        },
        computed: {
            text() {
                return this.followed ? '已关注' : '关注该问题';
            }
        }
    }
</script>
Route::post('/question/follower', function (Request $request) {
    return response()->json(['question'=> request('question')]);
})->middleware('api');
 <question-follow-button question="{{ $question->id }}"
                                                user="{{ Auth::id() }}"></question-follow-button>
JellyBool 回复 @天山网艾克

这个文件 Example.vue 你改过没?

你用的 laravel 版本是多少? vuejs 的版本呢?

你的 assets/js/app.js 和 bootstrap.js 贴出来看看

天山网艾克 回复 @JellyBool

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'
// });
JellyBool 回复 @天山网艾克

使用 vuejs 2.0 吧:

 "vue": "^2.0.1",
    "vue-resource": "^1.0.3"

还是你之前用 vuejs 2.0 有问题

天山网艾克 回复 @JellyBool

好的 我试试看

天山网艾克 回复 @JellyBool
vue-resource.common.js?2f13:1525   Uncaught TypeError: window.Vue.use is not a function

现在出来了这个错误

JellyBool 回复 @天山网艾克

你在哪里使用 了 Vue.use() 这样的代码吧

你也注意一下 vue 和 vue-resource 的版本对应

天山网艾克 回复 @JellyBool

Vue.use() 没用过这个
是不是版本没对上》?

"laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
lg23 回复 @JellyBool

我的package.json文件内容如下:
vue是默认版本,没改动过

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}
天山网艾克 回复 @lg23

是版本没对上, 我再去琢磨琢磨吧

lg23 回复 @天山网艾克

怎么说,你说说现在你用的版本

天山网艾克 回复 @lg23
{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  },
  "dependencies": {
    "gulp": "^3.9.1"
  }
}
天山网艾克 回复 @lg23

我当创建新的项目的时候 Laravel 5.3 package.json 里面就是这个样子, 不知道哪儿弄错了

lg23 回复 @天山网艾克

我和你不一样,我创建laravel5.3时 配置里就是我上面的内容

lg23 回复 @天山网艾克

你的问题,现在解决没

天山网艾克 回复 @lg23

还没解决 还在折磨中, 这个跟我全局安装的vue-cli 有关系吗 ? 为什么这不一样呢 @jellyBool

JellyBool 回复 @天山网艾克

Laravel 5.3 package.json ?你具体是哪个版本的 laravel ?怎么创建的 5.3 ?有用composer 中国镜像?

lg23 回复 @JellyBool

composer create-project laravel/laravel admin --prefer-dist "5.3.*"
我是这样创建的

天山网艾克 回复 @lg23

果然是这样啊 , 这个可以了,可以创建 vue2.0 的了 太感谢了

天山网艾克 回复 @JellyBool
"require": {
        "php": ">=5.6.4",
        "laravel/framework": "5.3.*",

是的 composer是中国镜像的 是这个原因?

JellyBool 回复 @天山网艾克

啊哈,我觉得就是 composer 中国镜像的原因。

好几个人都遇到问题了

天山网艾克 回复 @JellyBool

那这个怎么解决,知道吗 ? 我修改vue 的版本嘛 resource版本对不上,不修改嘛 程序报错 哈哈哈 真的郁闷啊

JellyBool 回复 @天山网艾克

额。。。你一起更新两个不就好了么

   "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
lg23 回复 @JellyBool

意思是要切换镜像重新下载一个laravel 5.3

JellyBool 回复 @lg23

就用官方的就好了啊。没必要换

天山网艾克 回复 @JellyBool
 composer create-project laravel/laravel admin --prefer-dist "5.3.*"

这样写 可以了 可以创建

   "vue": "^2.0.1",
    "vue-resource": "^1.0.3"

的项目了

lg23 回复 @天山网艾克

怎么样,搞定没

lg23 回复 @JellyBool
 "vue": "^2.0.1",
 "vue-resource": "^1.0.3"

我的版本就是这两个,那我的问题就不是版本的问题了??

天山网艾克 回复 @lg23

搞定了,
composer create-project laravel/laravel admin --prefer-dist "5.3.*"
用这个 已解决,太感谢了,谢谢哦

lg23 回复 @天山网艾克

唉,我的还没搞定
你的目前的搞定是执行gulp后,浏览器控制台没有出现任何报错提示???

天山网艾克 回复 @lg23

对,^ ^ 这个没搞定啊 还是那个问题 纠结中,,,,,,

lg23

群主下面的报错之前出现,

vue.js?3de6:564[Vue warn]: Error compiling template:

– Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , 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 , 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 , as they will not be parsed.

但出现这个报错的页面分别是make\show\edit 这三个页面,而这三页面都有 @include('vendor.ueditor.assets')
目前执行gulp后,删除 @include('vendor.ueditor.assets')
上图内的报错没有了,初步锁定二大块:
1、.webpack('app.js');
2、@include('vendor.ueditor.assets')
但.webpack('app.js');这个大家应该都是一样的,剩下只有@include('vendor.ueditor.assets')它了。可是为什么呢?想不通

经过尝试 @include('vendor.ueditor.assets') 在app.blade.php页面加载,现在没有之前的错误提示了。问题算是解决了,但不知道群主这块是怎么处理的,我看视频中应该是在show\make\edit 页面里引入的。

但现在有一个新问题?
有登录情况下show\make\edit 三个页面均没有报错,但是在未登录情况下就会报下面的错误:

ueditor.all.js:29264 Uncaught TypeError: Cannot read property 'offsetWidth' of null
    at UE.Editor.renderUI (http://www.zt.com/vendor/ueditor/ueditor.all.js:29264:75)
    at UE.Editor.fireEvent (http://www.zt.com/vendor/ueditor/ueditor.all.js:1619:38)
    at langReadied (http://www.zt.com/vendor/ueditor/ueditor.all.js:6566:12)
    at http://www.zt.com/vendor/ueditor/ueditor.all.js:6748:17
    at HTMLScriptElement.element.onload.element.onreadystatechange (http://www.zt.com/vendor/ueditor/ueditor.all.js:921:29)

虽然没有发现它们对程序有任何影响,但是这种报错提示总是不好

天山网艾克 回复 @lg23

这个问题是 HTML 回答表单因为用户没有登陆,所以表单是不会显示的,但是下面的js代码依然存在的, Ueditor是因为它的选择器找不到制定ID的 元素所以报 offsetWidth 的错误,你把下面script代码也放在一个用户登陆判断里面就不会报错的!

Psychic_role

安装不了Vue支持,plugins报错
List of plugins was not loaded for following hosts: https://unpkg.com/vue/dist/vue.js

Due to the following errors:
'Connection failed with HTTP code 403' for 'https://unpkg.com/vue/dist/vue.js'

下载js文件打包成zip手动安装也是失败

JellyBool 回复 @Psychic_role

npm 安装不了 vue ? 开个 vpn 试试

Psychic_role

是axios.post()吗?
我遇到一个问题偶尔会显示不出来这个vueJs button
找到了问题出在
show.blade.php的{!! $question->body !!}
输入body文字提交有一定的几率会导致

标签的样式出现问题,原因没找到

    <div class="container">
        <div class="row">
            <div class="col-md-9 ">
                <div class="panel panel-default">
                    <h2 class="panel-heading">
                        {{ $question->title }}
                    </h2>
                    <div class="panel-body">
                        <div class="lead" style="margin-bottom: 40px;">
                            {!! $question->body !!}
                        </div>
                    </div>
JellyBool 回复 @Psychic_role

纳尼...是因为 body 的内容

Psychic_role 回复 @JellyBool

生成的

<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的内容

JellyBool 回复 @Psychic_role

看来是因为ueditor 的 html 元素的一些style样式引起的吧

Psychic_role 回复 @JellyBool

我也很绝望啊

JellyBool 回复 @Psychic_role

你删掉 style 样式,我回去看看是哪些元素引起的

Psychic_role 回复 @JellyBool

出错的这些是从其他网站或者word上拷贝过来的,直接输入的话除了bootstrap中的lead没有别的样式

JellyBool 回复 @Psychic_role

嗯哼...我也觉得是

Psychic_role 回复 @JellyBool

老师,我加了这个验证来判断用户是否验证邮箱以访问网站,为什么不行啊

@if(Auth::user()->is_active==0)
    请登录邮箱验证账号
@elseif(Auth::check()==false||Auth::user()->is_active!=0)
<body>
@endif
JellyBool 回复 @Psychic_role

逻辑问题吧…使用 Auth::user() 的时候需要保证是已经登陆了,就是前面有个Auth::check()

Psychic_role 回复 @JellyBool

这样吗,看起来有点傻啊

@if(Auth::check())
    @if(Auth::user()->is_active==0)
    请登录邮箱验证账号
    @elseif(Auth::user()->is_active!=0)
     <body></body>
     @endif
@else
<body></body>
@endif
PCDotFan

Jelly 大神什么时候出个 SPA 的视频呀~

lnamphp
Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

Warning: Cannot modify header information - headers already sent in Unknown on line 0
{"followed":false}
JellyBool 回复 @lnamphp

到你的 php.ini 配置文件里面,将 always_populate_raw_post_data 配置改为 -1.

然后代码中使用到 $data = $HTTP_RAW_POST_DATA 的地方改成 $data = file_get_contents('php://input');

lnamphp

这是什么情况

jeanim

问题已解决

JellyBool 回复 @jeanim

认真看看视频的后面部分和下一节视频。

jeanim 回复 @JellyBool

恩,回看了一下,发现原来是留给下面环节的问题,主要有几天没跟了,解决了一堆bug后,这个是最后才出现的,就不记得视频里的状态了,谢谢~~

Ming Zhou

请问一下dalao,phpstorm已经设置给javascript了es6,其他es6语法都能识别到,但是=>这个箭头不能识别到呢?

wangshuaiws

楼主啊。phpstorm 写.vue文件,html代码下边全是红线。是主题的原因吗? Es6语法也改了,还下了一个vue.js的插件。。

JellyBool 回复 @wangshuaiws

如果都配置好的话应该就是主题的问题了。。。。

不过最新版的 PhpStorm 就已经默认支持 Vuejs 了

wangshuaiws 回复 @JellyBool

楼主,我找到问题了。我建立.vue后缀的文件时,选择了ts,所有phpstorm认为.vue的文件就是TypeScript类型的文件,使用TypeScript解析的方法去解释.vue文件,所以报错了。把 选项里面 Editor => File Types里找到Typescript,把添加的.vue删掉(减号)。找到Vue.js 将.vue添加上。就把.vue文件当做vue.js解析了。就好了。。

JellyBool 回复 @wangshuaiws

阔以,这个问题我没有遇到过

damonsnow

楼主想问下.vue文件中script标签中的语法是什么,我没有学过ES6和VUE,感觉好懵逼,粗略看了下VUE里面的也不想是这样的语法?求解,或者有什么可以学习的资料?

JellyBool 回复 @damonsnow

ES6 的语法啊,不是有 ES6 的教程么?

JellyBool 微信公众号

不定期送书,送键盘,送订阅优惠