轻松学会Workerman实战

在Laravel中使用Vue.js

此课程是收费课程,请先购买或加入会员后再访问。

laravel中使用vue

laravel中使用vue的流程,大家可能不是太清楚,我这里简单讲解一下。https://laravel.com/docs/5.5/frontend

其实laravel框架,已经默认对vue.js有了支持,像webpack这些繁琐的配置,都不需要你来操心了。

phpstrom配置

先配置一下phpstorm,不然等后面命令跑完,phpstorm会直接卡死,不信你可以试试 ^_^。因为我们后面写vue会使用ES6语法。所以先来配置成ES6,不然vue的代码,在编辑器里会到处报错。

后面安装npm包后,phpstorm会非常卡。找到ignore这个地方,自己加上一个node_modules;。这样phpstorm就不会索引npm包的文件了。

node环境

首先要有的是node.js环境

Tips:
if 你用的是mac os,可以参考这篇教程,使用nvmnode.js装上先。
elseif 你用的是laragon,那无需安装了,打开laragon的终端,里面已经自带了node.js
else 你用wampxamppphpstudy等其他套件,那请先自行安装上node.js

有了node.js后,要做的第一件事情,就是先安装淘宝npm镜像。如果你不装这个,那在安装npm包的时候,会经常会出现网络故障。

npm install -g cnpm --registry=https://registry.npm.taobao.org

laravel默认提供的package.json配置里面包含了axiosbootstrapjqueryvue.js。也就说你只要跑一下这个命令,这些包都会自动下载安装好。

cnpm install

这里的c也就是指china,中国的意思。加了这个c以后,它才会走淘宝的npm镜像,这样下载安装的速度就非常快了。

名词解释

大家都用过php的composer了,那其实这里的npm就相当于composer。只不过一个还是node的,另一个是php的。

npm composer
npm install composer install
package.json composer.json
node_modules vendor

vue组件

打开resource/assets/js/components/ExampleComponent.vue,这个就是vue组件了。其实你不要把组件想的太复杂,现在就把它当成一个html页面理解就好了。

<template>里面放的就是html代码,<script>里面就是这个页面里对应的js代码。

这里的.vue文件,咱们的浏览器当然是不可能认识这种格式的了。而且里面的js都是使用的ES6语法,浏览器也不认识。这就需要使用命令将这里的vue转成浏览器可以正常识别的js文件。命令在此

npm run watch

这个命令会一直监听这里的vue文件有没有改变,如果有变化,它就会自动重新编译成正常的js文件。

编译出来的文件,就是public/js/app.jspublic/css/app.css两个文件。而这两个编译完的文件,也不需要我们去引用它。在app.blade.php布局模板中也默认引用好了。

调用组件

打开resource/assets/app.js,可以看到这里定义了个组件。那这个组件怎么用呢?其实也很简单。打开resource/views/home.balde.php,将原来的代码,全部删掉,里面放这样的代码。

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

访问一下/home

修改一下组件中的内容,刷新页面。好,这既是vue组件的用法了,还是很简单的吧。

Tips: 如果你的phpstormvue文件没有代码高亮,你需要在phpstorm设置的plugin中自行安装一下vue插件