vue 使用了浏览器的刷新之后报错_Laravel 7 + vue.js 学习笔记（一）
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 学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么材质窗帘价格最贵？
- 下一篇： esp32 rtc 时钟设置不对_STM