记录PHP学习前端的小贴士（想起来就记一点儿...）

前言

现在的前端不是以前的前端了，直接改代码就行，现在的前端（钮祜禄前端）会打包了，虽然已经打包好几年了但是落伍的我还是没咋接触自己开发的项目要一个phper打包的，来吧，记录学习一下。

学习前请准备好Node.js，会用到npm工具

目录

前言

Laravel breeze

VUE环境部署

第一杯水：

第二杯水：

第三杯水：

执行成功！

---

Laravel breeze

laravel的起步套件

cd到www目录下

composer create-project laravel/laravel laravel_project
//创建laravel_project目录（如果有需要目录为空），并在目录中下载配置信息。

然后就是配置数据库相关，不赘述了。

接下来安装breeze入门套件

cd 到laravel_project下执行

//安装breeze套件
composer require laravel/breeze --dev
//执行 后边选要用在项目的JS框架 不写框架也行
php artisan breeze:install vue/react...
//数据表同步，会有两个表，报错了可以自己去数据表看一下，报错原因说是数据太大，懒得改代码可以去数据表自己配置一下，忽略报错。
php artisan migrate
//执行npm
npm install
//打包 打包执行完毕后会输出把代码都打包到哪里了
npm run dev

 接下来就需要去VIEW视图文件夹\resources\views\layouts\guest.blade.php和\resources\views\layouts\app.blade.php把这两个文件的引入路径加上，移除@vite(['resources/css/app.css', 'resources/js/app.js'])；

php artisan serv

就可以访问你的入门套件了

public/index.php/login

 /public/index.php/register

/public/index.php/dashboard

 我就是被@vite迷惑了，了解打包文学之后就想开了。

通过以上了解到前端构建了一个开发环境，开发者在开发环境对代码进行调试，然后打包生成一个封装好的目录文件将代码整合，实际web网站使用的是打包后的那个目录文件。

VUE环境部署

最近有一个ASP.net+VUE的项目，部署环境的过程比较坎坷，下边就是记录一下我在部署环境的时候脑子里进的水。

第一杯水：

因为上边自己部署过laravel 安装的node.js和npm版本都是用的最新的

npm install

报错 包已弃用

deprecated browserslist@2.11.3

...

在我这个项目中报这个错的原因是npm版本过高了，需要回退到符合的版本，那么如何查询到符合的版本呢？

第二杯水：

package.json里面明明有记录engines，但是因为这里面的npm版本是>=3.00我就觉得6也能兼容，所以我自作聪明的将npm9回退到了npm6还是不好使，到这里我才意识到不只是npm版本过高了，我的node.js版本也太高了，所以回到梦开始的地方，卸载node.js 安装nvm使用nvm安装nodejs。

第三杯水：

重新安装node.js之后，npm install 已经不会报弃用了，新的问题来了，npm run dev的时候会报错 vue-cli-servce service 不是内部方法，第三杯水就是我npm install 了vue-cli-servce 这个包当然是找不到的啊

查看package里面的cli执行 npm install @vue/cli-service 安装成功了

npm run dev

执行成功！