设置 VueJS、Tailwind 和 Laravel - 用于开发的 VuTaL Stack - RunPod

注意：在设置此 VuTaL 堆栈之前，您应该具备 Laravel、NPM 命令的基本知识。

VuTaL 是 Laravel 社区中最常见的开发堆栈之一。当我需要使用 REST API 功能构建单页 Web 应用程序（无页面刷新）时，我个人会选择 VuTaL Stack。REST API 还有助于进一步将应用程序与任何其他服务集成或构建移动应用程序。

如果您正在寻找使用 VuTaL Stack 构建的示例应用程序，您可以在此处查看。

Github 回购：https ://github.com/scriptmint-solution/vutal-stack-setup

以下是我更喜欢设置 VuTal Stack 的步骤。

安装 Laravel 8

您必须在系统上安装 Composer v2。

如果你想用 Composer 安装 Laravel，你可以运行：

composer create-project laravel/laravel vutal
cd vutal

或者

如果你已经全局安装了 Laravel Installer 作为 composer 依赖，你可以运行：

laravel new vutal
cd vutal

安装 VueJS 3

您必须在系统上安装 nodejs。根据我的开发环境，我使用 Node v16.x 和 NPM v7.x 进行开发。

要安装 VueJS 3，您可以运行：

npm install vue@next

截至目前，默认的 VueJS 版本是 2.x。根据 Vue Creator Evan You 的说法，3.x 版将于 2022 年 2 月 7 日成为默认版本。

您还需要通过运行以下命令来安装其他依赖项：

npm install resolve-url-loader sass sass-loader vue-loader --save-dev

接下来，转到 resources/js/app.js 文件并注册您的应用程序实例。

import { createApp } from "vue"

const app = createApp({});

app.mount("#root");

现在，我们将创建我们的第一个 Vue 组件。在 resources/js/components 文件夹下创建 HelloWorld.vue 文件，如下所示：

<template>
    Hello World!
</template>

要注册这个 HelloWorld 组件，请将其添加到 resources/js/app.js 文件中，如下所示：

import { createApp } from "vue"
import HelloWorld from './components/HelloWorld.vue';

const app = createApp({});
app.component('hello-world', HelloWorld);

app.mount("#root");

现在，让我们更改 resources/views/welcome.blade.php 的默认内容来加载这个 Vue 实例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
    </head>
    <body>
        <div id="root">
            <hello-world></hello-world>
        </div>
    </body>
</html>

Vue 应用程序需要挂载到 DOM 元素中。例如，要挂载一个 Vue 应用程序，我们应该传递 id “root”。另请注意，这是我们使用此 Vue 实例注册的自定义组件。

此时，当您在浏览器中访问您的应用程序时，您将得到一个空白页面。

添加顺风 CSS 3

要安装 Tailwind CSS 3，您可以运行：

npm install -D tailwindcss
npx tailwindcss init

这将创建 tailwind.config.js 文件，您可以使用它来配置您的 tailwind 设置。tailwind.config.js 的默认内容如下：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

接下来，在 resources/sass 文件夹下创建一个 app.scss 文件并放入以下内容：

@tailwind  base;
@tailwind  components;
@tailwind  utilities;

在最后一步，我们需要编译这些资产。Laravel 默认提供 webpack.mix.js 文件来编译资源。让我们修改这个文件。

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });

您需要运行 npm 命令来编译资产。

npm run dev

资产在 public 文件夹下生成，如下图所示：

您可以将这些资产链接到您的 welcome.blade.php 文件，如下所示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <link href="/css/app.css" rel="stylesheet">
    </head>
    <body>
        <div id="root">
            <hello-world></hello-world>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

你快完成了。您现在可以在浏览器中访问该应用程序，您应该会看到“Hello World！” 没有任何样式的内容。

让我们为 HelloWorld.vue 组件添加一些 Tailwind 样式：

<template>
    <div class="h-screen w-full flex justify-center items-center bg-gray-800">
        <span class="text-gray-400">Hello World!</span>
    </div>
</template>

再次构建您的资产，使用 npm run dev 命令并刷新您的浏览器。没啥事儿！是的。

Tailwind 会生成数百个 CSS 类，并且会变得非常庞大。因此，默认情况下 Tailwind 会删除（清除）所有未使用的类。

请记住，在我们的 tailwind.config.js 文件中，我们将内容部分作为空数组。让我们修改它以搜索所有 .vue 文件并删除所有其他未使用的类。

module.exports = {
  content: [
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

现在构建您的资产，使用 npm run dev 命令并刷新您的浏览器。

欢呼！您已经设置了您的第一个 VuTaL 堆栈。快乐发展！