README

🚧 正在开发中 - 不要在生产环境中使用！

安装

此包仅传递默认配置，不安装任何前端相关依赖项。为了帮助您保持运行，此包提供安装和配置前端依赖项的说明。

1. 安装 TailwindCss，其插件，postcss 和 autoprefixer。

$ npm i -D  \
    tailwindcss@latest \
    @tailwindcss/aspect-ratio \
    @tailwindcss/forms \
    @tailwindcss/typography \
    @tailwindcss/line-clamp \
    postcss-import@latest \
    postcss@latest \
    autoprefixer@latest \
    mapbox-gl

1. 配置您的 webpack.mix.js 文件

mix
    
    // add @ui alias to be used on js files
    .webpackConfig({
        resolve: {
            alias: {
                '@ui': path.resolve(__dirname, 'vendor/lemaur/ui/resources/assets/js')
            }
        },
    })

    // configure postCss
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import')({
            path: ["vendor/lemaur/ui/resources/assets/css"],
        }),
        require('tailwindcss'),
        require('autoprefixer'),
    ])

1. 配置您的 tailwind.config.js 文件。

module.exports = {
    presets: [
        require('./vendor/lemaur/ui/resources/assets/js/tailwindcss/tailwind.preset'),
    ],
    theme: {
        extend: {},
    }
}

1. 配置您的 /resources/css/app.css 文件。

/**
 * Tailwindcss
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/**
 * Defaults from UI library
 */
@import "default";
@import "focus";

/**
 * Your custom CSS files
 */
@import "homepage"; /* <- example */
@import "forms"; /* <- example */

1. 配置您的 resources/js/app.js 文件。

/**
 * Import Alpine and its plugins 
 */
import Alpine from "alpinejs"
import intersect from "@alpinejs/intersect"
import persist from "@alpinejs/persist"
import focus from "@alpinejs/focus"

/**
 * Import Alpine custom plugins, components, etc from UI library
 */
import navigation from "@ui/alpinejs/navigation.js"

/**
 * Define Alpine Plugins
 */
Alpine.plugin(intersect)
Alpine.plugin(persist)
Alpine.plugin(focus)

/**
 * Define Alpine Components
 */
Alpine.data('navigation', navigation)

/**
 * Make Alpine available as global object
 */
window.Alpine = Alpine

Alpine.start()