vue 使用了浏览器的刷新之后报错-凯发k8官方网
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凯发k8官方网官网查看，举个例子：??，?: 等相关符号，匿名函数等。
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，下一篇文章见～
总结
以上是凯发k8官方网为你收集整理的vue 使用了浏览器的刷新之后报错_laravel 7 vue.js 学习笔记（一）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：