README

这是我为自己项目使用的 Laravel 模板。

它与干净的 Laravel 安装有什么不同？

最重要的变化是它删除了所有 Laravel Mix 配置，并添加了新的 webpack 配置文件。我曾尝试在某些项目中使用 Laravel Mix，但感觉并不合适。我不喜欢所有的配置方式，有时编译需要花费很长时间，而且我感觉自己没有控制权。

我从 vue-webpack 模板 中获取了新的配置文件，并将其与 Laravel 集成。现在的开发流程感觉非常顺畅和快速。

我还用 Vue 重写了所有视图（甚至 Auth 命令生成的视图）。Blade 模板仅定义了一个挂载点，它会自动映射到 resources/assets/js/pages 文件夹中定义的同名 Vue 组件。我将在下面的部分中详细解释这一点。

最后，这里有很多内容，而且非常具有个人观点，但你可以查看所有配置文件并在需要时更改它们。或者，你也可以尝试使用它，然后告诉我你的看法！

如何使用它开始一个项目？

启动项目非常简单。只需按照以下步骤操作

1. 运行 composer create-project --prefer-dist prwlr/laravue project-name 开始项目。
2. 进入你的项目目录，运行 yarn 或 npm install 来安装所有依赖项。
3. 在你的 .env 文件中，有一行是 APP_URL=https://。将此变量更改为你的应用程序 URL。这对于开发非常重要，因为资产路径将使用此 URL 构建。例如，对于 Homestead 默认 URL，它将看起来像 APP_URL=http://homestead.app。如果你的应用程序在特定端口运行，只需将其作为是的样子输入即可，例如如果你的应用程序在本地主机上的端口 8000 运行，只需将其输入为 APP_URL=https://:8000。
4. 现在你可以运行 yarn dev 或 npm run dev 来开始你的项目。

该命令将尝试自动打开一个浏览器，指向你的项目 URL。有时这可能无法实现，例如在运行 vagrant 时，所以请手动打开它。

你也可以使用我修改过的 php artisan make:auth 命令，它将生成你预期的页面，但会展示一些 Vue 组件。

关于库

我会尽量列出模板中包含的所有内容。

• Vue 组件可以使用 JSX 语法通过 .js 文件编写，或者使用 .vue 文件编写。我更喜欢 JSX 语法，因为它让我有更多的控制权。它也感觉更自然，因为我已经写了很长时间的 React。如果你想使用 .vue 文件语法，你必须自己挂载组件。我将在以后添加自动挂载这些组件的功能。
• 使用 SCSS 处理基本样式、变量、混入和导入以及覆盖供应商。
• 每个Vue组件都导入一个.scssm文件来处理自己的样式。这个文件扩展名是我定义的，用来告诉webpack使用SCSS和CSS Modules处理这个文件。这是一个不错的组合，因为您有作用域选择器，还可以使用变量和混入，从您的sass文件夹中导入它们。
• 用Bulma代替Bootstrap来处理一些样式。Bulma更现代，它完全独立于jQuery或JavaScript，并且可以轻松将其组件与Vue等集成。由于它非常模块化，您可以删除它或仅导入您需要的组件。不过，Auth命令生成的视图使用它，所以请注意这一点。还有一个如何覆盖其变量的示例。
• 在导入任何其他CSS之前，导入Normalize.css来处理一些重置。
• 项目中也包含了Animate.css。有了它，您就可以轻松地向Bulma组件或自己的组件添加动画。

我可以使用哪些任务？

由于这是与Laravel合并的模板，我将复制大部分描述来自Vuejs Webpack模板。如果您想了解有关任务、文件夹结构或如何更改或扩展任何内容的更多信息，请参阅他们的文档。

• yarn dev || npm run dev：一流的开发体验。

  • 进入您的浏览器，并点击您的APP_URL开始开发（它将尝试自动打开）。
  • Vue预设用于处理使用JSX编写的vue文件。这是我偏好的语法，因为它更强大，尽管有点啰嗦。
  • Webpack + vue-loader也用于单文件Vue组件。
  • 热重载（不过它无法保留状态）。
  • 具有状态保留的编译错误覆盖。
  • 使用ESLint的保存时检查。
  • 源映射。

• yarn build || npm run build：生产就绪的构建。

  • 使用UglifyJS对JavaScript进行压缩。
  • 使用html-minifier对HTML进行压缩。
  • 所有组件的CSS提取到单个文件中，并使用cssnano进行压缩。
  • 所有静态资产都使用版本哈希编译，以实现高效的长期缓存，并自动生成包含正确URL的生产base.blade.php。

有一个测试命令，即yarn test || npm run test，但现在它不起作用。仍然不确定如何处理使用JSX语法的Vue组件的测试。您可以考虑它是一个正在进行的工作。

配置选项

有一个名为client_config的文件夹，其中包含构建和开发配置所需的一些对象。大多数您不需要担心，但有一些可能很有用。例如，您可以将cssSourceMap设置为true以在开发中生成源映射。默认未激活，因为相对路径是“有缺陷的”（更详细的解释可以在文件中的注释中找到）。有关选项的更多信息，请参阅vuejs-templates webpack文档。

在.env文件中，您还可以将DEV_POLLING设置为TRUE以在webpack开发配置中启用轮询。这对于使用Homestead运行项目等情况很有用。

您还可以更改DEV_PORT变量，以更改Express运行的端口（Express与webpack一起用于提供资产）。

注意事项

Laravel向一个名为Laravel的全局JavaScript变量中添加了一些有用的功能。我在其中添加了错误包和旧输入等更多内容。我创建了一个名为laravel的文件，存放在utils文件夹中，它仅从全局变量中拉取并导出。然后，在我的Vue组件中，我可以导入它，以便更简洁地调用该变量。

如果一个视图对PHP变量或从Laravel获取的内容有特定要求，我创建了一些小的blade文件，并将它们放在resources/views/injectors文件夹中，用于满足这些需求。这些文件仅添加一个脚本，将新值附加到Laravel全局变量上。然后，您可以将此注入器包含到需要使用它的视图中。您可以在默认视图或由Auth命令生成的视图中查看一些示例。

由于我使用Vue处理视图的所有内容，我定义了一个新的组件类别，称为页面组件。您可以在resources/assets/js/pages文件夹中找到它们。这些组件用作主要入口点。有一个将页面与视图连接的约定。所有页面组件都使用以Pascal Case命名的文件夹创建，并自动映射到具有相同名称但以Kebab Case命名的mount点或具有相同id的div。例如，resources/assets/js/pages/ExampleTest/index.js将自动挂载到<div id="example-test"></div>内部。

那么，还有其他事情吗？

其实没有。我只是想感谢您尝试或至少阅读它。如果您有任何反馈，我将非常感激。我相信很多事情可以改进，我愿意讨论，所以请打开一个issue，发送一个pull request，或者通过gianluca.prwlr@gmail.com给我发消息。