Alpine.Js

Question

我正在使用

https://github.com/laravel-frontend-presets/tall

并且无法升级 alpine.js 版本

我尝试更改 package.json

更改自

"alpinejs": "^2.8.2",

改为

"alpinejs": "^3.1.0"

编辑：

npm install
npm run dev

但是alpine.js不能正常工作

2021 年 6 月 25 日编辑像下面这样的东西是行不通的

<div x-data="{ title: 'Start Here' }">
   <h1 x-text="title"></h1>
</div>

2021 年 6 月 26 日编辑我试着输入

Alpine

在控制台中显示

Alpine is not defined

Answer 1

我用CDN解决了这个问题。

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

编辑：这不是一个合适的解决方案。

Answer 2

如果您从 NPM 导入 Alpine V2，您现在需要为 V3 手动调用 Alpine.start()。如果您使用 Alpine 的构建文件或来自 <template> 标签的 CDN，这不会影响您。

// Before
import 'alpinejs'

// After
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

https://alpinejs.dev/upgrade-guide#need-to-call-alpine-start

Answer 3

我今天正为此苦苦挣扎。

在package.json文件中你会看到alpinejs版本2.x的东西。

将此更改为 3.0.0

"alpinejs": "^3.0.0",

现在，当你运行 npm install alpinejs 时，它会将 alpine 升级到最新版本，对我来说 "alpinejs": "^3.2.2",。

最后，您需要打开resources/js/app.js文件并添加新的alpine东西

require('./bootstrap');
require('./index');

import Alpine from 'alpinejs'
// Add any extra packages you want to install here
window.Alpine = Alpine

Alpine.start()

Answer 4

您需要先转到 package.json 文件并将 "alpinejs": "^2.0.0" 更改为 "^3.0.0."，然后使用 npm install alpinejs 安装 alpine。这将自动下载最新版本。然后后来运行npm install && npm run dev。然后在您的 resources/js/app.js 文件中，输入以下内容：

import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

我也遇到过同样的问题。但这对我来说很好，我相信它对你也有用！

Alpine.Js - 我该如何升级

Alpine.Js - How can i Upgrade

laravel-8