Laravel Vue SPA 起步
打赏作者

柴小兽

挽尊,要不要考虑 出个小程序之类的

JellyBool 回复 柴小兽

录完这个系列打算出小程序

zxy0506 回复 JellyBool

可以出 RabbitMQ 的视频吗

JellyBool 回复 zxy0506

目前在我的体量内,都是用的 supervisor。我看看 RabbitMQ 呗

zxy0506 回复 JellyBool

哈哈哈 好好好

zhangwei

哈哈哈 力顶下

49gd

太好了 最近在研究spa做后台

JellyBool 回复 49gd

做后台可以直接使用 element ui 这种组件

windsama 回复 JellyBool

有没后台从零开始的视频呀

JellyBool 回复 windsama

这个倒是没有。。。

messia 回复 JellyBool

可以出一个么,后台从零开始的视频

JellyBool 回复 messia

这个感觉排得很后面

dppppp

真是要什么有什么!值老师,加油!

EddyAnn

Jelly可以共享你的phpstorm配置吗,感觉配色好cool

tiankong 回复 JellyBool

请问在引用css 或 js 文件时,如何输入文件名就自动补全cdn路径的???

JellyBool 回复 tiankong

使用 live-template

2kpo

正好打算写spa+laravel的 太棒啦

dope2008

app.js:34686 [Vue warn]: Error in render function: “TypeError: Cannot read property ‘matched’ of undefined”

(found in )

JellyBool 回复 dope2008

是哪里写错了呗 matched

dope2008 回复 JellyBool

我找到问题了,我原来APP_ENV=local…我直接修改为APP_ENV=dev,就OK啦

uighurbabbage

实现这种方式的SPA后vuex不好使 一旦换页面数据就丢失了 helly怎么看这个问题以及有何处理方案

JellyBool 回复 uighurbabbage

后面就知道了,一旦换页面数据就丢失了 这个是什么?丢失什么?

uighurbabbage 回复 JellyBool

我的意思是vuex storage里的数据丢失
mode是hash方式 路由全都是vue负责是不会丢失

JellyBool 回复 uighurbabbage

并没有吧,我感觉我之前实现的 spa,vuex 数据并不会丢失

uighurbabbage 回复 JellyBool

嗯 我晚上在确认一下

y7ut123

为什么Vue-devtools 使用不了。。。
-Vue.js is detected on this page. Open DevTools and look for the Vue panel.

punktus0308 回复 y7ut123

你重新安裝並重啟瀏覽器就可以了

imcode

太棒了,就是更新有点慢,希望楼主更新快的

JellyBool 回复 imcode

嗯,我现在正常更新了

zhangzhang 回复 JellyBool

感谢~~~~~~~~~~~~~~

jayin

@JellyBool 视频中, url地址中包含#是自带的吗

JellyBool 回复 jayin

对的,默认情况下 vue-router 管理路由会自带 #

datavotee

老师,您用的命令行laravel命令:laravel new vue-spa是如何配置的?我这里没有laravel这个命令。

JellyBool 回复 datavotee

先这样:

composer global require "laravel/installer"

然后在 .zshrc 里面设置你的环境变量(PATH):

export PATH=$HOME/bin:/usr/local/bin:~/.composer/vendor/bin:$PATH
messia

感觉暂停次数过多了,播放器就会崩掉

JellyBool 回复 messia

是因为 cdn 的原因么?

liujun 回复 JellyBool

我也是这个情况

q530004000 回复 liujun

我也出现了这种情况, 因为需要暂停敲代码, 所以暂停次数挺多的, 就会崩掉.

ccpone

教主vue.use()下面老是带波浪线phpstorm中如何调好呢?

JellyBool 回复 ccpone

这个需要自己调一下主题配色吧

alias

强烈建议各位童鞋在laravel-mix中补上

mix.browserSync('my-domain.dev');

开启热加载…一句话的事情,省去N多F5,何乐不为。

juvenile000 回复 alias

你有没有感觉每次热更新都好慢,网页刷新一下就好了但是热更新得等起码三秒,你有解决办法吗?

John Howard

按视频操作,为什么我使用样式就变了呢?

Young
 Route::any('{all}', function () {
        return view('layout.master');
    })->where(['all' => '.*']);

我用的也是Laravel5.5+vuejs2.5,按照你的方法,然而并不能去除 # 符号

JellyBool 回复 Young

注意前端的 vue-router 使用 history model

Young 回复 JellyBool

嗯,搞定

mode: 'history'
messia

好奇怪,我不用路由的方式,能单独的引入某个组件,但是一采用路由方式,显示的就是空白呀,在视图文件里面我是

<div id="app">
	<router-view></router-view>
</div>

这样写得呀,难道还有其它坑??

JellyBool 回复 messia

嗯。。。目前的信息我也是不知道

messia 回复 JellyBool

咦,我贴的代码怎么消失了。。

longjl1980

请教下老师,如果我想将路由按模块拆分,在vue-router2.0里面是怎么处理的?

JellyBool 回复 longjl1980

将路由按模块拆分? 比如说?

longjl1980 回复 JellyBool

谢谢老师,已经解决了,之前写错了个地方

messia

我看了视频后,想着写一个后台管理页面
我laravel里routes里面的配置如下:
Route::get(’/admin’,‘Admin\HomeController@index’)->name(‘adminindex’);

控制器代码如下:

namespace App\Http\Controllers\Admin;

use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

class HomeController extends BaseController
{
    public function index()
    {
    	return view('admin/index');
    }
}

webpack.mix.js代码如下:

let mix = require('laravel-mix');
mix.js('resources/assets/js/admin/main.js', 'public/js/admin')
   .less('resources/assets/less/admin/main.less', 'public/css/admin');

main.js代码如下

import Vue from 'vue';
import VueRouter from 'vue-router';
import routers from './routers/router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);


const router = new VueRouter({
    mode: 'history',
    routers:routers
});

new Vue({
    el: '#app',
    router: router
});

router.js代码如下

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);


export const login = {
	path:'/',
	component:'../view/login'
}

export const routers = {
	login
}

login.vue代码如下

<style lang="less">
    @import '../../..//less/login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <Input v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                    <p class="login-tip">输入任意用户名和密码即可</p>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            form: {
                userName: 'iview_admin',
                password: ''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    Cookies.set('user', this.form.userName);
                    Cookies.set('password', this.form.password);
                    this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                    if (this.form.userName === 'iview_admin') {
                        Cookies.set('access', 0);
                    } else {
                        Cookies.set('access', 1);
                    }
                    this.$router.push({
                        name: 'home_index'
                    });
                }
            });
        }
    }
};
</script>

<style>

</style>

在通过了cnpm run watch编译后,采用

http://www.****.cc/admin#/

进行访问的时候,试图文件里<router-view></router-view>这里没有加载路由的vue文件,这个区域变成了

这是为什么呀??

JellyBool 回复 messia

确保 admin/index.blade.php 有正确引入 app.js 和写上 ``
大概问题在 router.js:

 const routers = {
	path:'/',
	component:'../view/login'
}

这种问题,文件组件清晰一点就好多了,排除 bug 也快

messia 回复 JellyBool

终于找到问题了,在实例化vueroute的时候,路由参数应该是routes我写成了routers。。。希望大家不要踩这个坑。

sunlonghb

routes.js?952c:19Uncaught TypeError: _vueRouter2.default is not a constructor

sunlonghb

今天被带入坑了 一个问题困扰了一天

sunlonghb

不能渲染

sunlonghb

npm install vue vue-loader vue-html-loader vue-style-loader --save-dev
npm install vue-template-compiler --save-dev

sunlonghb

一天出错 无法渲染 就差上面那个命令了 哎 无语了

Jerda

如何解决app.js文件过大的问题啊

liujun

不知道为什么router-link里面:to={name:路由名}没有用,我明明在routes里面定义了名字

lvxianchao

提两个小建议哈~

第一,视频在暂停-播放,暂停-播放重复几次以后播放器就崩了。

第二,可不可以把视频播放时的那个音量的控制方式调整一下,Mac上使用板子和鼠标经常误操作导致音量变成静音。

後知後覺de范特西

我按照教程去做,为啥页面一直是空的

Madman

大佬,准备出一个lumen 教程不

xiaoheheyo

这个字体是什么呀?

zxhs1988

大神,你这个视频,没付过钱的,就不能下载吗

真实与美

用chrome和新安装的firefox,怎么都无法播放视频,很着急,请用最新的firefox测试下。多谢。

ly_thc

服务启动后默认的端口号是多少?