项目结构 #

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── alpine-init.js
│   ├── components/
│   │   ├── dropdown.js
│   │   ├── modal.js
│   │   └── tabs.js
│   └── stores/
│       ├── user.js
│       └── cart.js
└── assets/
    └── images/

project/
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── index.js
│   │   ├── dropdown.js
│   │   ├── modal.js
│   │   └── tabs.js
│   ├── stores/
│   │   ├── index.js
│   │   ├── user.js
│   │   └── cart.js
│   ├── plugins/
│   │   └── my-plugin.js
│   └── utils/
│       └── helpers.js
├── public/
│   └── index.html
├── package.json
└── vite.config.js

export function dropdown() {
    return {
        open: false,
        
        toggle() {
            this.open = !this.open
        },
        
        close() {
            this.open = false
        }
    }
}

export function dropdownTemplate() {
    return `
        <div x-data="dropdown()" class="dropdown">
            <button @click="toggle()">菜单</button>
            <div x-show="open" @click.away="close()">
                <slot></slot>
            </div>
        </div>
    `
}

import { dropdown } from './components/dropdown'
import { modal } from './components/modal'
import { tabs } from './components/tabs'

document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', dropdown)
    Alpine.data('modal', modal)
    Alpine.data('tabs', tabs)
})

export { dropdown } from './dropdown'
export { modal } from './modal'
export { tabs } from './tabs'

export function registerComponents(Alpine) {
    Alpine.data('dropdown', dropdown)
    Alpine.data('modal', modal)
    Alpine.data('tabs', tabs)
}

export const userStore = {
    data: null,
    token: null,
    
    get isAuthenticated() {
        return !!this.token && !!this.data
    },
    
    async login(credentials) {
        const res = await fetch('/api/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(credentials)
        })
        const data = await res.json()
        this.token = data.token
        this.data = data.user
        localStorage.setItem('token', data.token)
    },
    
    logout() {
        this.data = null
        this.token = null
        localStorage.removeItem('token')
    }
}

export function registerUserStore(Alpine) {
    Alpine.store('user', userStore)
}

import { registerUserStore } from './user'
import { registerCartStore } from './cart'
import { registerNotificationStore } from './notification'

export function registerStores(Alpine) {
    registerUserStore(Alpine)
    registerCartStore(Alpine)
    registerNotificationStore(Alpine)
}

import Alpine from 'alpinejs'
import { registerComponents } from './components'
import { registerStores } from './stores'
import { registerPlugins } from './plugins'

window.Alpine = Alpine

document.addEventListener('alpine:init', () => {
    registerComponents(Alpine)
    registerStores(Alpine)
    registerPlugins(Alpine)
})

Alpine.start()

@props(['open' => false])

<div 
    x-data="{ open: {{ $open ? 'true' : 'false' }} }"
    class="dropdown"
>
    <button @click="open = !open">
        {{ $slot->title }}
    </button>
    
    <div x-show="open" @click.away="open = false">
        {{ $slot->content }}
    </div>
</div>

<x-dropdown>
    <x-slot:title>
        菜单
    </x-slot:title>
    
    <x-slot:content>
        <a href="#">选项 1</a>
        <a href="#">选项 2</a>
    </x-slot:content>
</x-dropdown>

<div 
    x-data="{ open: <%= open ? 'true' : 'false' %> }"
    class="dropdown"
>
    <button @click="open = !open">
        <%= title %>
    </button>
    
    <div x-show="open" @click.away="open = false">
        <%= content %>
    </div>
</div>

Alpine.data('userDropdown', () => ({ }))
Alpine.data('productCard', () => ({ }))
Alpine.data('searchInput', () => ({ }))

Alpine.store('user', { })
Alpine.store('cart', { })
Alpine.store('notification', { })

$dispatch('user:login')
$dispatch('user:logout')
$dispatch('cart:add')
$dispatch('cart:remove')

project/
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── ui/
│   │   │   ├── button.js
│   │   │   ├── input.js
│   │   │   └── modal.js
│   │   ├── forms/
│   │   │   ├── contact-form.js
│   │   │   └── search-form.js
│   │   └── layout/
│   │       ├── header.js
│   │       ├── sidebar.js
│   │       └── footer.js
│   ├── stores/
│   │   ├── user.js
│   │   ├── cart.js
│   │   └── ui.js
│   ├── plugins/
│   │   ├── persist.js
│   │   └── toast.js
│   ├── utils/
│   │   ├── api.js
│   │   ├── format.js
│   │   └── validation.js
│   └── styles/
│       └── main.css
└── public/
    └── index.html

project/
├── src/
│   ├── index.js
│   ├── modules/
│   │   ├── auth/
│   │   │   ├── components/
│   │   │   │   ├── login-form.js
│   │   │   │   └── register-form.js
│   │   │   ├── stores/
│   │   │   │   └── auth.js
│   │   │   └── index.js
│   │   ├── products/
│   │   │   ├── components/
│   │   │   │   ├── product-card.js
│   │   │   │   └── product-list.js
│   │   │   ├── stores/
│   │   │   │   └── products.js
│   │   │   └── index.js
│   │   └── cart/
│   │       ├── components/
│   │       │   ├── cart-item.js
│   │       │   └── cart-summary.js
│   │       ├── stores/
│   │       │   └── cart.js
│   │       └── index.js
│   ├── shared/
│   │   ├── components/
│   │   ├── stores/
│   │   └── utils/
│   └── plugins/
└── public/

features/
├── auth/
│   ├── components/
│   ├── stores/
│   └── utils/
├── products/
└── cart/

export function counter(initial = 0) {
    return {
        count: initial,
        increment() { this.count++ },
        decrement() { this.count-- }
    }
}

export * from './components'
export * from './stores'
export * from './utils'

const config = {
    apiUrl: import.meta.env.VITE_API_URL,
    timeout: 5000
}

export function useApi() {
    return {
        async fetch(endpoint) {
            return fetch(config.apiUrl + endpoint)
        }
    }
}