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

 

今天，我们通过 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'