教程：Laravel + Vuejs + Tailwind CSS 构建一个 Todo App 第一部分

文章转发自专业的Laravel开发者社区，原始连接：learnku.com/laravel/t/3…

今天，咱们经过 Vue.js，Laravel 以及 Tailwind 构建一个简单的 todo 应用。为了节约时间，咱们不提供任何的数据交互。可是不要担忧，接下来的第二部分将会更加的精彩。

开发准备

首先，咱们经过 Laravel CLI 在须要添加项目的目录中运行 laravel new <自定义工程名> 来构建一个项目。Laravel CLI 能够帮咱们完成咱们所需的 Laravel 和 Vue 的安装。

对于这样简单的项目来讲，咱们直接使用默认的welcome.blade.php 文件。咱们必需要配置这个模板，以便 Vue 能够挂载到项目并正常工做。首先，将下面的 meta 标签添加到 head 标签内的其余meta标签下方便可。

<meta name="csrf-token" content="{{ csrf_token() }}">

复制代码

如今，咱们能够删除默认的样式表以及导入的字体，而后来操做 body。在body标签内，咱们能够看到一堆生成的代码。接下来，咱们将其替换为以下内容：

<div id="app">
    <example-component></example-component>
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>

复制代码

运行项目，经过屏幕咱们能够看到项目已正常运行。

如你所见，示例组件已正确渲染，能够小小的得意一下。您本身在编写过程当中若有任何错误，可随时查看项目的GitHub repo ，按照个人提交来检查。

如今咱们开始准备 Tailwind，我假设你已经查看了我较早的一篇文章earlier article 并完成了里面的工做，该项目解释了如何在 Laravel 工程中配置 Tailwind。完成上面所述工做后，让咱们在welcome.blade.php中再增长一行代码，以便咱们可使用 Tailwind 样式。在head标签内的title标签下，添加导入这段代码：<link href="{{ asset('css/app.css') }}" rel="stylesheet">。

最后，咱们开始准备开发！

Vue.js 组件

让咱们拆开脚手架并经过添加本身的组件来进行 Vue 开发。 在 resources/assets/js/components 目录下， 咱们删除  ExampleComponent.vue， 而且添加命名为 todo.vue 的文件。 如今，在 resources/assets/js/app.js 内部， 咱们能够更新组件用来引入咱们的 todo 组件，就像下面这样:

Vue.component('todo-component', require('./components/todo.vue'));

复制代码

在 welcome.blade.php 文件中, 咱们能够像下面这样将 Vue 组件换成咱们的 todo 组件。

<todo-component></todo-component>

复制代码

要在浏览器看到它，咱们须要运行 Laravel Mix。若是你一直按照个人方法，那么我建议使用npm run watch，那么编写的代码将会自动编译。在咱们的模板文件中，咱们能够添加以下所示代码：

<template>
    <div>
        <div>
            <h1>Todo List</h1>
            <div>
                <input v-model="newTodo" placeholder="Add Todo">
                <button @click="add" :disabled="newTodo.length === 0">Add</button>
            </div>
        </div>
        <div>
            <div v-for="(todo, index) in todos" :key="todo.id">
                <p>{{todo.text}}</p>
                <button @click="updateStatus(todo)" v-text="todo.finished ? 'Not Done' : 'Done'"></button>
                <button @click="remove(index)">Remove</button>
            </div>
        </div>
    </div>
</template>

复制代码

如你所见，这是一个很是简单的 Vue 组件。像全部的 Vue 组件同样，咱们拥有一个 div 包装器，以及两个子 div。在第一个 div 区块里面咱们有标题，以及新的 todo input。咱们已经 input 绑定到名为 newTodo 的v-model，而且咱们在button中添加了一个名为add的方法，用来提交新的 todo。当input没有输入文本时，该按钮将处于禁用状态，这样保证咱们不会提交空的 todo。

在底部的div中，咱们将遍历已添加的每一个 todo，并显示text数据和两个按钮。第一个按钮可让咱们将 todo 标记为已完成或未完成，第二个按钮能够将 todo 彻底删除。是否是感受 So Easy？

接着往下看，这是咱们编写的 Vue 组件的其他部分。

<script>
    export default{
        data(){
            return{
                todos: [],
                newTodo: '',
                baseId: 1,
            }
        },
        methods: {
            add() {
              const t = this;

              let todo = {
                id: t.baseId,
                text: t.newTodo,
                finished: false,
              }

              t.todos.push(todo);

              t.newTodo = '';
              t.baseId++;
            },
            updateStatus(todo) {
              todo.finished = !todo.finished;
            },
            remove(index) {
              const t = this;

              t.todos.splice(index, 1);
            }
        }
    }
</script>

复制代码

这里咱们能够管理 todo 数据，并且咱们能够看到上面模板绑定的三个方法。在数据中，咱们有一个 todos 数组，能够在其中存储 todo；咱们有绑定到input上的 newTodo，最后，baseId是用来给每一个 todo 一个假的『unique』id，以便 Vue 在v-for 遍历时跟踪它们。

在 methods 里，咱们有add()方法，它可使用 data 中 newTodo 以及 baseId 来建立一个新的 todo 实例，并将其推入到咱们的 todo 数组，而后将 input 状态重置为空的递增 baseId。而后咱们来看updateStatus()方法，它能够更新 todo 的完成状态。最后咱们再看看remove()方法，它会传入 todo 的 index 做为参数并将其从 todos 数组中移除。

运行·npm run prod，咱们能够在浏览器看到 todo 组件的效果。

使用组件时，能够看到 todo 的添加顺序不正确。好尴尬啊！在add()方法中，咱们使用.unshift()来替换.push()。如今，它基本达到了咱们的预期。

组件虽然功能齐备，可是看起来仍是不太好看。接下来咱们将搭配 Tailwind CSS 使其更加友好。

看起来不错

如今，咱们的应用程序在 Tailwind 中看起来很好。首先，从 welcome.blade.php 文件开始， 把 todo 组件放置在页面中间。

在拥有应用 id 的 div上, 咱们能够添加如下内容。 class="h-screen flex items-center justify-center"。这会将咱们的组件放置在页面的中间。 而后添加一些背景色和字体用来介绍一些基本样式。 在相同的 div 上添加 .bg-teal-lightest 和 .font-sans 类。 页面看起来更好了。

如今，咱们能够将焦点放在咱们的组件样式上。让咱们从一些基本的组件开始，这样咱们就能够看到咱们在处理什么。在todo.vue文件中的div包装器上，咱们能够添加.bg-white，.rounded，.shadow，以及.p-6 class，从而来制做一个漂亮的 card。

有了白色的背景，咱们能够在页面上看到div的显示位置。所以，让咱们使用如下类为它提供一个更好的宽度：.m-4，.w-full，.lg:w-3/4，以及.lg:max-w-lg。如你所见，在移动设备上，咱们让 card 占据整个屏幕的宽度，一旦达到了咱们的最大断点，咱们继续让它增加，直到它达到屏幕的 75% 或者最大宽度。

接下来处理 todo 列表自己，对于包装器div 的 header，咱们只需在底部添加一个.mb-4 class，使其与列表项分开。而后在h1上，咱们添加一个.text-grey-darkest class，这样效果看起来就不是那么紧凑。

如今有趣的部分是咱们的新 todo 输入框。对于它的包装器 div,咱们将经过添加.flex 类使它变样 ，并经过 .mt-4 给它和 h1 之间保留间距。 在 input 框和  button 按钮上，咱们将添加一大堆这样的类:

<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" v-model="newTodo" placeholder="Add Todo">
<button class="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal" @click="add" :disabled="newTodo.length === 0">Add</button>

复制代码

这些内容都很简单，使你困惑的多是 input 上的  .appearance-none 以及 button 上的 flex-no-shrink ， .appearance-none 是一个重置类，用于从给定元素中删除全部浏览器样式。 而 .flex-no-shrink是一个 flex 助手， 它将  flex-shrink 设置成0用来防止按钮文字在较小的视图中自动换行。如今，咱们有了一个样式精美的标题。

在咱们设置样式以前，新的样式看起来会使咱们忽视掉空的状态，咱们应该让用户知道他们没有任何的 todo。

在第二个 div 组，v-for 的下边, 咱们能够添加如下内容:

<div v-show="todos.length === 0">
	<p class="w-full text-center text-grey-dark">There are no todos</p>
</div>

复制代码

如今，咱们的用户能够看到 todo 在上面了。

最后，咱们仅需给咱们的todo添加样式。咱们能够忽略外层的div,直接跳到咱们的 v-for.再一次,咱们将要添加一堆完整的css class.因此,让咱们看看完成后的效果真后再仔细检查一遍。

<div class="flex mb-4 items-center" v-for="(todo, index) in todos" :key="todo.id">
    <p class="w-full" :class="todo.finished ? 'line-through text-green' : 'text-grey-darkest'">{{todo.text}}</p>
    <button class="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white" :class="todo.finished ? 'text-grey border-grey hover:bg-grey' : 'text-green border-green hover:bg-green'" @click="updateStatus(todo)" v-text="todo.finished ? 'Not Done' : 'Done'"></button>
    <button class="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red" @click="remove(index)">Remove</button>
</div>

复制代码

都是很简单的东西,可是咱们将要作一到两处特别的更改。在"v-for"和"div",咱们只是须要让它们变得灵活，跟中间的元素对齐，而且在底部加上一些空白。

"p"标签可能看起来简单，可是咱们实际上利用了Vue的动态类来转换咱们的css类以达到让咱们的用户看到他们已经完成了todo的效果.在未完成的状态下，咱们只是用".text-grey-darkset"来给文字上深灰色。可是，在完成的状态时，咱们要用".text-green"和".line-through"来转换颜色成绿色而且加上一个删除线。

对于这里的按钮，咱们利用了以前添加「add」 按钮的一些类，同时也利用了 Vue 的动态类。接下来，试着本身动手，分析咱们到底作了什么。

如今，咱们终于完成了咱们的想要的样式。

总结

嚯！咱们在这方面确实作了不少工做，如今才刚刚开始。在本文中，咱们建立了Laravel、Vue 和 Tailwind 项目；使用Vue.js 构建了一个 todo 组件，而后用Tailwind 进行样式化。

对于下一篇文章，咱们固然还有不少内容要涉及到。咱们必须将 todo 持久化到数据库，而且应该可能将一些 Tailwind 类抽取到咱们本身的样式表中，这样更方便管理组件。