Laravel 7.x 配置前端依赖

laravel 7.x 引入前端依赖资源配置 bootstrap jquery 不经常用省的老是忘记

一、官方方法——推荐方法
laravle中package.json中没有 bootstrap/jquery/popper 包版本需要手动安装

"devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }

手动安装步骤

1、进入到项目文件夹
2、安装laravel的ui管理器 （laravel 7.x 对应 laravel/ui:^2.0 ）
3、ui管理器安装 bootstrap
此时package.json文件中就会添加bootstarp/jquery/popper包资源，以及resources/js/bootstrap.js文件中引入资源
4、npm更新包资源

cd /path/of/your/project
composer require laravel/ui:^2.0 --dev
php artisan ui bootstrap
npm install
npm run dev

二、手动安装

1、引入资源

    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "popper.js": "^1.12"
    }

2、更新资源

npm install

3、引入资源
在resources/js/bootstrap.js 文件添加以下代码

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

三、视图引入

<link rel="stylesheet" href="{{ mix('css/app.css') }}"> 
<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>

四、建议使用yarn替代npm去安装包
yarn安装

yarn config set registry 'https://registry.npm.taobao.org'
yarn install --no-bin-links

五、其它问题
1、npm run dev 时缺依赖 Running: npm install vue-template-compiler --save-dev --production=false

> @ dev /mnt/hgfs/work/project/demo
> npm run development


> @ development /mnt/hgfs/work/project/demo
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

    Additional dependencies must be installed. This will only take a moment.
 
    Running: npm install vue-template-compiler --save-dev --production=false

解决方法：在package.json 添加vue-template-compiler包，再yarn install --no-bin-links 安装依赖

"dependencies": {
        "vue-template-compiler": "^2.6.12"
    }