axitbv/laravel-artisan-vue

Laravel Artisan 命令，用于生成带有 Vuex 商店的 Vue.js 功能应用程序的脚手架

维护者

详细信息

github.com/axitbv/laravel-artisan-vue

源代码

问题

安装: 112

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

开放问题: 0

1.3 2021-01-05 19:25 UTC

Requires

MIT fdcf6b650575b99b4dfc3ec5b98df0b11fcadd96

  • Joost Jacobs <j.jacobs.woop@xit.nl>

scaffoldlaravelartisanvuejsvuevuex

This package is auto-updated.

Last update: 2024-09-06 03:48:58 UTC

README

Laravel Artisan 命令，用于生成带有 Vuex 商店的 Vue.js 功能应用程序的脚手架，并采用了一些最佳实践。

安装

composer require --dev axitbv/laravel-artisan-vue

使用命令

php artisan vue:feature SomeNewFeature

将会产生

resources/js/components/some-new-feature/components/App.vue
resources/js/components/some-new-feature/index.js
resources/js/components/some-new-feature/store/actions.js
resources/js/components/some-new-feature/store/getters.js
resources/js/components/some-new-feature/store/index.js
resources/js/components/some-new-feature/store/mutation_types.js
resources/js/components/some-new-feature/store/mutations.js
resources/js/components/some-new-feature/store/state.js

使用生成的文件

这里的想法是将每个 Vue.js 功能应用程序拆分为自己的包。这个包随后将被加载到将提供该功能的视图中。一个视图，一个特定页面的包，一个商店，一个服务，一个入口点，一个容器组件。

  1. 确保入口点 resources/js/components/some-new-feature/index.js 被构建为其自己的包。

示例 webpack.mix.js 配置

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .js("resources/js/components/some-new-feature/index.js", "public/js/some-new-feature.js")
    .sass("resources/sass/app.scss", "public/css/all.css");

mix.extract();

if (mix.config.production) {
    mix.version();
}
  1. 在你的视图中，确保在主脚本（manifest.js、vendor.js 和 app.js）之后加载该 js。
@section('after_scripts')
<script src="{{ url (mix('/js/some-new-feature.js')) }}" type="text/javascript"></script>
@endsection

如果你还没有这样的部分，修改你的 layout/app.blade.php。只需确保应用程序功能包在其他脚本之后加载。

  1. 添加一个具有适当 id 的 div，其中将启动功能应用程序。
<div id="js-vue-some-new-feature"></div>
  1. 可选：如果您从控制器传递任何数据到功能应用程序，您可以在 <div> 标签上添加一个或多个 data-* 属性。

您可以将任何类型的数据传递给一个或多个 data-属性，但最常见的一个例子是将应用程序通信的某种端点传递过去。例如，在一个博客编辑器功能应用程序中，可以像这样传递一个帖子的完整路径

<div id="js-vue-blog-editor" data-endpoint="/api/v1/posts/10"></div>

并调用动作调用 API 并检索数据。

另一种方法是从控制器获取帖子数据并将其作为属性传递

<div id="js-vue-blog-editor" data-post="{{ $post }}"></div>

或者另一种方法

<div id="js-vue-blog-editor" data-endpoint="/api/v1/posts" data-load="10223"></div>

由您决定。

Laravel 默认 Vue.js 设置注意事项

Laravel 提供 Vue.js（带有前端预设）的方式假设以下情况是真实的

  1. 您希望在页面的任何地方加载 Vue 组件
  2. 您希望将您拥有的所有 Vue 组件加载到内存中并准备好，以便在每次页面请求时使用。
  3. 如果您的 Vue 组件有 Vuex 商店，它将被合并到一个全局的单个状态树中。这意味着，如果您遵循一次性加载所有内容的方法，那么您的根实例将包含所有的状态，即使某个功能在页面上不一定显示或使用。

这是通过在由前端预设构建的 layouts/app.blade.php 文件中的封装 <div id="app"></div> 实现的。

此外，app.js 将在封装的 <div> 中启动 Vue.js 根实例。提供的 ExampleComponent 也会被加载到内存中，并且有一个可以递归加载 所有 Vue 文件的代码片段。

如果您正在构建大型应用程序，其中包含大量功能、众多子组件和 Vuex 商店，这将很快变得不可持续！

您想要实现的是以下内容

  • 对于任何需要在每个页面上全局可用的 Vue 组件，在 app.js 中注册它。例如导航组件，如导航栏、菜单等。

  • 不要使用一个大的 Vue 实例：为布局的各个部分（如导航栏部分、侧边栏、控制侧边栏、页脚等）创建多个 Vue 实例（根实例），每个都应有唯一标识的 id，最好是正确命名空间化的，如 #navbar-js-vue，#sidebar-js-vue。

  • 为您的应用程序中每个功能视图创建一个特定的页面包，该包将有自己的入口点、自己的容器、自己的 Vue.js 根实例。 这正是这个包提供的功能！

结果是，您只需将应用程序视图所提供功能所需的内容加载到内存中。额外的优势是，当您有多个 Vuex 启用的存储时，您不会得到一个全局的单个状态树：状态被限制在您的功能应用程序的根实例中。最后，Vue.js 开发者工具也很好地与多个根实例协同工作。

致谢

这受到了 GitLab 的前端开发指南的极大启发

许可证

MIT