README

Laravel前端预设，用于Svelte初始脚手架。

为什么选择它？

Svelte是JavaScript空间中的一种有趣的新方法，由@Rich_Harris创建。尽管传统的前端框架主要在浏览器中工作，但Svelte在编译步骤中完成这项工作。它们提供了一种流畅的语法来编写表达性代码，但将其编译为小型、无框架的纯JavaScript。

如果您不了解Svelte是什么，我们强烈建议您从Rich Harris在YGLF Code Camp 2019的演讲Rethinking Reactivity开始，他的介绍性博客文章，或者如果您更倾向于动手实践，可以查看Svelte的交互式教程。

此包仍在积极开发中，因此您可能想关注存储库以了解未来的更改。

安装

您可以通过Composer安装此包

composer require wewowweb/laravel-svelte-preset

之后，运行以下命令，它将为项目提供初始脚手架

php artisan ui svelte

要安装JavaScript依赖项，运行

npm install && npm run dev

此包将为您提供开始使用Laravel和Svelte开发所需的基本文件集

/js/app.js
/js/components/App.svelte
webpack.mix.js

。

使用方法

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    ...
    <!-- Include the app.js file -->
    <script src="{{ mix('js/app.js') }}" defer></script>
  </head>
  <body>
    <!-- Include your App Component -->
    <App />
  </body>
</html>

注册自定义Svelte组件

如果您希望使用自定义组件，请注意您不能使用常规的svelte组件。这样做将导致svelte组件的无效构造函数错误。

请遵循以下一般约定来创建您的自定义组件

组件名称必须由两个或更多单词组成，单词之间用破折号连接，例如 'my-test-component'。
可以在blade文件中像常规html标签一样访问组件，例如 <my-test-component></my-test-component>
需要关闭标签，因为它是一个web组件。

如果您希望在blade.php文件中注册并使用自定义组件，可以这样做

步骤1：创建一个新的自定义组件

让我们创建一个新的Svelte组件（例如MyTestComponent.svelte）

<script></script>

<main>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">My Test Component</div>
          <div class="card-body">
            I'm a test component.
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

步骤2：修改webpack.mix.js文件

修改webpack.mix.js文件如下

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
-   .svelte();
+   .svelte({
+       customElement: true,
+       tag: null // to get rid of "no custom element tag name" warning because we are defining components tag name it in app.js file. otherwise you would have to put "<svelte:options tag={null} />" in all of your custom elements.
+   });

步骤3：将组件导入到app.js中

然后在app.js文件中，像这样导入MyTestComponent

require('./bootstrap');

import App from "./components/App.svelte";
+ import MyTestComponent from "./components/MyTestComponent.svelte";

const app = new App({
  target: document.body
});

window.app = app;

+ customElements.define('my-test-component', MyTestComponent);
export default app;

步骤4：将App组件转换为自定义组件

require('./bootstrap');

import App from './components/App.svelte';
import MyTestComponent from './components/MyTestComponent.svelte';

+ customElements.define('my-app', App);
customElements.define('my-test-component', MyTestComponent);

- const app = new App({
-     target: document.body,
- });

- window.app = app;
- export default app;

步骤5：在blade.php文件中使用新组件

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        ...
        <!-- Include the app.js file -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body>
        <!-- Include your App Component -->
-       <App />
+       <my-app></my-app>
+       <my-test-component></my-test-component>
    </body>
</html>

此外，您也可以在svelte组件内定义标签，而不是使用customElement.define，如下所示

<svelte:options tag="my-test-component" />

变更日志

请参阅CHANGELOG以获取更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

安全性

如果您发现任何安全问题，请通过电子邮件发送至gal@wewowweb.com，而不是使用问题跟踪器。

鸣谢

许可证

MIT 许可证 (MIT)。更多信息请参阅许可证文件。

wewowweb / laravel-svelte-preset

维护者

详细信息