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

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

mostwin

dd( );

775397252

xdebug

newborn

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

JellyBool

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

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

chenxin

用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

zyzplzyz

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

zyzplzyz

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

kissgxd

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

JellyBool

npm 直接安装的。

kissgxd

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

JellyBool

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

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

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

JellyBool

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

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

具体的报错是什么?

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

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

saloou

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

JellyBool

装个 vuejs 的插件试试

tangzw

这个视频支持单独购买吗

JellyBool

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

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
 SyntaxError: Unexpected token

语法错误

es6语法的快捷键是 command ,

lg23

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

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

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

JellyBool

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

lg23

好的,谢谢!
我再试试

lg23
$ 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 贴出来看看

天山网艾克

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 有问题

天山网艾克

好的 我试试看

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

现在出来了这个错误

JellyBool

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

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

天山网艾克

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

我的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

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

天山网艾克
{
  "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"
  }
}
天山网艾克

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

lg23

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

lg23

你的问题,现在解决没

天山网艾克

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

JellyBool

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

lg23

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

天山网艾克

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

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

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

JellyBool

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

好几个人都遇到问题了

天山网艾克

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

JellyBool

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

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

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

JellyBool

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

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

这样写 可以了 可以创建

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

的项目了

lg23

怎么样,搞定没

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

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

天山网艾克

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

lg23

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

天山网艾克

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

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)

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

天山网艾克

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