laravel

laravel是php為底層所寫的框架，和大多數的開源框架一樣使用了mvc模式，在使用的時候使用了一些編程語言的高級特性，如：解決類與類之間依賴的問題引入了依賴注入(DI)，管理多個類結構的Service Container和Service Provider等等，作為一個phper，因為公司使用了laravel，所以需要深入的使用該框架而寫這些學習筆記，不喜勿噴～不定期更新，歡迎各位進行討論！

話不多bb，我們進入主題～～

一.環境相關:

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

我們從官方文檔下手

PHP版本要求

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包的安裝就可以進行開發，以下會講述我搭建環境的過程。

php&&npm&&node version

4.laravel 命令 安裝器

composer global require laravel/installer

確保將 Composer’s system-wide vendor 目錄放置在你的系統環境變量 $PATH 中，以便系統可以找到 Laravel 的可執行文件。該目錄根據你的操作系統存在不同的位置中；一些常見的配置包括 :

macOS: $HOME/.composer/vendor/bin

Windows: %USERPROFILE%AppDataRoamingComposervendorbin

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

您也可以通過運行 composer global about 命令查找并查看 Composer 的全局安裝路徑。

以上4個基本要求搭建好我們就可以在本地進行laravel7 的開發了--

首先，可以通過已經配置好的laravel命令來新建一個laravel7項目

laravelinstall

安裝好以后我們可以看一下composer.json文件(json格式)，該文件是你需要安裝vendor的描述文件

composer.json

可以看到我們的新項目目前還沒有vendor文件夾，可以說相關依賴包還沒有下載下來，右側關注require-dev下的描述

我們可以在根目錄下命令行運行：

composer update

這個命令會非常慢，因為很多composer包是在“墻”外的，所以我們需要修改composer.json,使用國內的資源，在底部新增:

repositories

阿里還是巴巴，國內鏡像配置成功，我們繼續：composer update吧～速度可以飛起來

composerupdate

由于圖太長就截取最后成功的了

我們回到phpstorm查看整個項目目錄可以發現vendor文件夾已下載下來

將.env.example文件復制命名為.env文件，laravel引入了env()函數來獲取配置,所以需要.env文件

需要執行:

php artisan key:generate

key

我們打開.env文件可以發現APP_KEY 項有值了，是基于base64加密的字符串，我們只需要知道這個是涉及到項目安全的，必須要生成！！

以上步驟完成后，我們項目的基礎目錄就已經基本搭建完成。

開始在本地運行我們的項目：

php artisan serve

serve

瀏覽器打開: http://127.0.0.1:8000

laravel

經典的頁面出現，說明我們搭建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，現在先不管該文件夾

package

開始運行本地前端：

npm run dev

npmrundev

我們繼續回去刷新：http://127.0.0.1:8000頁面還是和原來一樣，說明我們npm操作成功！

現在開始關注:/resources/js/app.js和/resources/js/bootstrap.js文件

app.js文件是整個項目前端js的配置文件

bootstrap.js文件是注冊前端依賴的入口文件，我們現在引入vue

vue

在項目根目錄下執行:

npm install vue

修改bootstrap.js文件如下

vue.js

修改app.js文件如下

app.js

我們可以試驗一下有沒有引入vue 成功,在resources/目錄下新建components文件夾，在components下新建ExampleComponent.vue文件如下:

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：

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，下一篇文章見～

總結

以上是生活随笔為你收集整理的vue 使用了浏览器的刷新之后报错_Laravel 7 + vue.js 学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。