README

使用该软件包

需要包

composer require --dev strangefate/foundationprep

在运行 foundation 安装命令之前，您应该初始化您的 ui 和 js 组件。

php artisan ui vue --auth

运行 foundation 安装程序，调用 npm 安装程序以安装 Zurb Foundation 包和配置项

php artisan foundation:install

安装程序将对您的当前部署进行以下更改。

首先，安装程序将执行一个带有依赖项和 fontawesome 的 zurb foundation 的 npm install。

npm install --save-dev @fortawesome/fontawesome-free foundation-sites what-input motion-ui

使用强制覆盖选项发布模板

//This command is run automatically as part of the foundation:install command
php artisan vendor:publish --provider=StrangeFate\FoundationPrep\FoundationPrepServiceProvider --force

将 Foundation SASS 文件复制并更新到设置中。

copy '/node_modules/foundation-sites/scss/settings/_settings.scss' resource_path('sass/_settings.scss')

使用 resources\js\bootstrap.js 更新 app.js 文件中的 Foundation 和 what-input，并删除 bootstrap 和 popper 调用。

try {
    window.$ = window.jQuery = require('jquery');
    window.Vue = require('vue');

    //require these packages
    require('foundation-sites');
    require('what-input');

    //remove these packages
    //require('bootstrap');
    //window.Popper = require('popper.js').default; 
} catch (e) {}

在您的 resources\js\app.js 文件末尾调用 foundation，或者如果您计划使用 Vue 组件，则在 Vue 挂载函数中调用。

const app = new Vue({
    el: '#app',
    mounted() {
    	$(document).foundation(); //With Vue components
    }
});
	
$(document).foundation(); //Without Vue components, comment out above Vue call.

Snackbar（可选）

Snackbar 是作为 Foundation 软件包的一部分部署的 Vue 组件。在此安装过程中，您将被告知是否希望包含它。资产将随着前面的步骤发布，选择“是”将添加 JavaScript 和 SASS 文件到您的项目文档中。

resources\js\app.js

//add somewhere after the require('bootstrap')
require('./snackbar-loader');

resources\sass\app.scss

@import "snackbar";  //end of file

重新编译您的资产

npm install && npm run dev

Snackbar 将注册一个 Vue 事件组件，并监听消息事件以循环展示给用户。它还将监听您的 axios post，查找任何具有错误或名为 'message' 的 json 字段的项，并将其自动解析给用户。

Event.$emit('message', "Message for user"); //single message
Event.$emit('messages', ['message 1', 'message 2']); //array of messages