教程：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 類抽取到咱們本身的樣式表中，這樣更方便管理組件。