教程：Laravel+Vuejs+TailwindCSS搭建TodoApp第一部分
时间：2023-03-30 02:32:36
PHP
文章转发自专业的Laravel开发者社区，原文链接：https://learnku.com/laravel/t...今天，我们通过Vue。js、Laravel和Tailwind来构建一个简单的待办事项应用程序。为了节省时间，我们不提供任何数据交互。不过别担心，接下来的第二部分会更加精彩。开发准备首先，我们通过LaravelCLI在需要添加项目的目录下运行laravelnew来构建一个项目。LaravelCLI可以帮助我们完成我们需要的Laravel和Vue的安装。对于这样一个简单的项目，我们将只使用默认的welcome.blade.php文件。我们必须配置这个模板，这样Vue才能挂载到项目中并正常工作。首先，在head标签内的其他元标签下方添加以下元标签。现在，我们可以删除默认的样式表和导入的字体，然后对正文进行操作。在body标签内，我们可以看到一堆生成的代码。接下来，我们用这样的东西替换它：
运行项目，通过屏幕我们可以看到项目运行正常。如您所见，示例组件已正确呈现，因此您可以感到自豪。如果在写的过程中有什么错误，可以随时查看项目的GitHubrepo，按照我提交的进行检查。现在我们开始准备Tailwind，我假设您已经查看并阅读了我之前的文章，该文章解释了如何在Laravel项目中配置Tailwind。通过上面的描述，让我们在welcome.blade.php中再添加一行，这样我们就可以使用Tailwind样式了。在head标签中的title标签下，添加并导入以下代码：
。最后，我们开始准备开发！Vue.js组件让我们拆开脚手架，通过添加我们自己的组件来进行Vue开发。在resources/assets/js/components目录下，我们删除ExampleComponent.vue并添加一个名为todo.vue的文件。现在，在resources/assets/js/app.js中，我们可以更新组件以包含我们的待办事项组件，如下所示：Vue.component('todo-component',require('./components/todo.vue'));在welcome.blade.php文件中，我们可以用我们的todo组件替换Vue组件，如下所示。要在浏览器中看到它，我们需要运行LaravelMix。如果你一直按照我的方法，那么我推荐使用npmrunwatch，这样写的代码会自动编译。在我们的模板文件中，我们可以添加以下代码： 如你所见，这是一个非常简单的Vue组件。像所有Vue组件一样，我们有一个div包装器和两个子div。在第一个div块中，我们有标题和新的待办事项输入。我们已经将输入绑定到名为newTodo的v-model，并且我们已经向提交新待办事项的按钮添加了一个名为add的方法。当input没有输入任何文本时，该按钮将被禁用，这样我们就不会提交一个空的todo。在底部的div中，我们将遍历我们添加的每个待办事项，并显示文本数据和两个按钮。第一个按钮允许我们将待办事项标记为已完成或未完成，第二个按钮可完全删除待办事项。是不是觉得SoEasy？继续，这是我们编写的其余Vue组件。这里我们可以管理todo数据，可以看到上面模板绑定的三个方法。在data中，我们有一个todos数组，里面可以存放todos；我们将newTodo绑定到输入，最后，baseId用于给每个todo一个假的“唯一”id，这样Vue就可以在v-for中使用v-for在遍历时跟踪它们。在方法中，我们有add()方法，它使用数据中的newTodo和baseId创建一个新的todo实例，将其推送到我们的todo数组中，然后将输入状态重置为空的递增baseId。然后我们查看updateStatus()方法，它更新待办事项的完成状态。最后，让我们看一下remove()方法，它将待办事项的索引作为参数并将其从待办事项数组中移除。运行npmrunprod，我们可以在浏览器中看到todo组件的效果。使用该组件时，您可以看到未按正确顺序添加待办事项。多么尴尬！在add()方法中，我们使用.unshift()而不是.push()。现在，它基本上不辜负我们的期望。虽然组件功能齐全，但看起来仍然不太好。接下来我们将使用TailwindCSS使其更加友好。看起来不错现在我们的应用程序在Tailwind中看起来不错。首先，从welcome.blade.php文件开始，将todo组件放在页面中间。在具有应用程序ID的div上，我们可以添加以下内容。class="h-screenflexitems-centerjustify-center".这会将我们的组件放在页面中间。然后添加一些背景颜色和字体来引入一些基本的样式。在同一个div上添加.bg-teal-lightest和.font-sans类。页面看起来更好。现在，我们可以专注于样式化我们的组件。让我们从一些基本组件开始，这样我们就可以看到我们正在处理的是什么。在todo.vue文件的div包装器上，我们可以添加.bg-white、.rounded、.shadow和.p-6类来制作漂亮的卡片。有了白色的背景，我们就可以看到div在页面上的显示位置了。因此，让我们使用以下类为其设置更好的宽度：.m-4、.w-full、.lg:w-3/4和.lg:max-w-lg。如您所见，在移动设备上，我们让卡片占据屏幕的整个宽度，一旦达到最大断点，我们将继续让它增长，直到达到屏幕的75%或最大宽度。在待办事项列表本身旁边，对于包装器div的标题，我们只需在底部添加一个.mb-4类，以使其与列表项分开。然后在h1上，我们添加一个.text-grey-darkest类，这样效果看起来就不会那么紧凑了。现在有趣的部分是我们新的待办事项输入。对于它的包装div，我们将通过添加.flex类来弯曲它，并通过.mt-4给它与h1的间距。在输入框和按钮按钮上，我们将添加一堆这样的类：
Add这些内容很简单，让你迷惑的可能是input上的.appearance-none和button上的flex-no-shrink，.appearance-none是一个重置类，它从给定元素中删除所有浏览器样式。.flex-no-shrink是一个flex助手，它将flex-shrink设置为0以防止按钮文本在较小的视图中换行。我们现在有一个样式精美的标题。在我们设置样式之前，新样式会让我们忽略空状态，我们应该让用户知道他们没有任何待办事项。在第二个div组中，在v-for下方，我们可以添加以下内容：没有待办事项 现在，我们的用户可以看到待办事项在最上面。最后，我们只需要设计我们的待办事项。我们可以忽略外部div并直接跳转到我们的v-for。同样，我们将添加一大堆css类。那么，让我们看看我们是如何完成的并仔细检查。
