Laravel 7 + vue.js 学习笔记(一)

laravel是php为底层所写的框架，和大多数的开源框架一样使用了mvc模式，在使用的时候使用了一些编程语言的高级特性，如：解决类与类之间依赖的问题引入了依赖注入（DI），管理多个类结构的Service Container和Service Provider等等，作为一个phper，因为公司使用了laravel，所以需要深入的使用该框架而写这些学习笔记，不喜勿喷～不定期更新，欢迎各位进行讨论！

话不多bb，我们进入主题～～

一.环境相关:

1.php(https://www.php.net/)

我们从官方文档下手

php版本需要 7.2.5 及以上，因为laravel底层编写的时候用了php7版本的许多新写法，不熟悉的可以去php官网查看，举个例子：??，?: 等相关符号，匿名函数等。

2.composer(https://getcomposer.org/)

php包管理工具，有点类似npm，也是不同的包能通过命令行composer进行安装

3.npm(https://www.npmjs.com/)&&node.js(https://nodejs.org/zh-cn/)

因为laravel7和vue.js进行比较深度的结合，所以可以直接在laravel7的基础框架内进行简单的配置以及npm包的安装就可以进行开发，以下会讲述我搭建环境的过程。

4.laravel 命令 安装器

composer global require laravel/installer

确保将 Composer’s system-wide vendor 目录放置在你的系统环境变量 $PATH 中，以便系统可以找到 Laravel 的可执行文件。该目录根据你的操作系统存在不同的位置中；一些常见的配置包括 :

macOS: $HOME/.composer/vendor/bin

Windows: %USERPROFILE%\AppData\Roaming\Composer\vendor\bin

GNU / Linux 发行版: $HOME/.config/composer/vendor/bin or $HOME/.composer/vendor/bin

您也可以通过运行 composer global about 命令查找并查看 Composer 的全局安装路径。

以上4个基本要求搭建好我们就可以在本地进行laravel7 的开发了--

首先，可以通过已经配置好的laravel命令来新建一个laravel7项目

安装好以后我们可以看一下composer.json文件（json格式），该文件是你需要安装vendor的描述文件

可以看到我们的新项目目前还没有vendor文件夹，可以说相关依赖包还没有下载下来，右侧关注require-dev下的描述

我们可以在根目录下命令行运行：

composer update

这个命令会非常慢，因为很多composer包是在“墙”外的，所以我们需要修改composer.json,使用国内的资源，在底部新增:

阿里还是巴巴，国内镜像配置成功，我们继续：composer update吧～速度可以飞起来

由于图太长就截取最后成功的了

我们回到phpstorm查看整个项目目录可以发现vendor文件夹已下载下来

将.env.example文件复制命名为.env文件，laravel引入了env()函数来获取配置,所以需要.env文件

需要执行:

php artisan key:generate

我们打开.env文件可以发现APP_KEY 项有值了，是基于base64加密的字符串，我们只需要知道这个是涉及到项目安全的，必须要生成！！

以上步骤完成后，我们项目的基础目录就已经基本搭建完成。

开始在本地运行我们的项目：

php artisan serve

浏览器打开: http://127.0.0.1:8000

经典的页面出现，说明我们搭建laravel7成功了！

二.vue.js 的引入

因为laravel框架的作者在进行前端开发的时候，刚开始使用的react.js框架，但是他觉得react比较难用，不适用于快速开发页面（，这个是大神的想法，react还是很不错的）；后面发现了vue.js上手快，适合快速开发单页应用，所以在laravel7里面引入vue十分的简单。

关注项目下package.json文件，和composer.json文件类似，该文件是描述前端包依赖的。

项目下有resources目录是用来编写前端的代码：js、lang（国际化）、sass（scss）、views

和上面安装vendor包依赖一样，前端安装包依赖我们需要用到npm命令

npm install

该命令会在项目下产生一个新的文件夹：node_modules，现在先不管该文件夹

开始运行本地前端：

npm run dev

我们继续回去刷新：http://127.0.0.1:8000页面还是和原来一样，说明我们npm操作成功！

现在开始关注:/resources/js/app.js和/resources/js/bootstrap.js文件

app.js文件是整个项目前端js的配置文件

bootstrap.js文件是注册前端依赖的入口文件，我们现在引入vue

在项目根目录下执行:

npm install vue

修改bootstrap.js文件如下

修改app.js文件如下

我们可以试验一下有没有引入vue 成功,在resources/目录下新建components文件夹，在components下新建ExampleComponent.vue文件如下:

vue文件编写的模版固定格式，在laravel7中我们可以关注下webpack.mix.js文件，该文件是决定你用哪个js框架和css框架的地方，laravel-mix已经为我们配置好了一切，之后如果需要换前端框架都需要修改该文件。

ExampleComponent.vue文件如下:

写一个测试routes，在/routes/web.php文件中写个测试路由：

home.blade.php文件如下：

进入到页面:http://127.0.0.1:8000/home可以看到:

说明我们的vuejs 引入到laravel7中成功.

为了规范以及开发简单，现在修改如下文件:

app.js：

自动导入resources/components目录下的.vue结尾的以及子目录下所有.vue文件，这样我们可以直接在.blade.php文件下直接使用定义的文件，不需要import。

新增模版文件：

可以使用该模版，举例如下：

修改路由文件

新建HomeController控制器，写入方法index,通过Controller转发到view会自动使用layouts/app.blade.php模版文件:

修改home.blade.php

重新刷新:http://127.0.0.1:8000/home可以发现还是Hello,World!

这个过程如果报错，应该是.env文件的DB_DATABASE配置项没有配置好，需要改为存在的数据库名和相关的数据库配置。

这篇文章先写到这里吧，后面有时间会写如何导入element-ui(scss)框架和tailwindcss框架～有些地方不怎么好截图描述，后期考虑录视频更加浅显易懂，欢迎一起学习，我是ck，下一篇文章见～