Конечно, мы можем построить все, что захотим, но если мы не можем сделать это красиво, в чем смысл?

Поверьте, я, как следующий программист, не умею все делать красиво. Слишком часто мы, как разработчики полного стека, тратим все свое время на то, чтобы получить желаемую функциональность, говоря: «Я вернусь и сделаю это довольно поздно», - а затем, к счастью, никогда не вернусь, чтобы сделать это красиво.

Bootstrap делает все, что угодно, исключительно простым, и существует неограниченное количество примеров для всего, что вам может понадобиться или понадобится. Существует также МНОГО «систем проектирования», которые имеют предварительно созданные компоненты, основанные на начальной загрузке, но для этого раунда я просто собираюсь просто добавить Bootstrap в свой /public/index.html, а затем иметь доступ к нему через мой проект вообще ничего не устанавливая.

Мы уже получили добавлена ​​аутентификация с пулом пользователей, создали базовую маршрутизацию для нашего приложения, а также создали группу пользователей для каждого клиента, чтобы контролировать доступ и владение данными в мультитенантном приложении. Мы даже обновили эту настройку GraphQL, чтобы включить раскрывающийся список с данными из DynamoDB и сохранить эти данные как объект JSON. Сегодня мы собираемся добавить немного стиля с помощью Bootstrap, не устанавливая ничего нового в наш проект!

Сначала запустите Cloud9, войдите в терминал и перейдите в каталог своего проекта.

cd jctest_vue

Продолжайте и запускайте проект, за этими изменениями интересно наблюдать вживую:

amplify run

Теперь - откройте /public/index.html и добавьте туда Bootstrap CDN внутри ‹head› ‹/head›:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Вот и все! Серьезно - вам не нужно ничего делать, кроме обновления кода, чтобы использовать Bootstrap там, где вы хотите.

Мы собираемся начать с того, что возьмем пример из Примеры Bootstrap NavBars и адаптируем его к настройке нашего маршрутизатора.

Откройте /src/App.vue - и вы увидите его в своей области ‹template›, если вы следили за другими статьями.

<template>
  <amplify-authenticator username-alias="email">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/todo">Todo</router-link> | 
      <router-link to="/todocategory">Todo Category</router-link>
    </div>
    <router-view />
    <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

Так выглядит наша текущая навигация. У.Г.Л. У тебя нет алиби, ты уродлив!

Нам нужно заменить все это кодом, взятым со страницы примеров для навигационной панели, которую мы хотим использовать.

<template>
  <amplify-authenticator username-alias="email">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample04">
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
               <router-link to="/" class="nav-link" :active='$route.name=="Home"'>Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/todo" class="nav-link">Todo</router-link>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
              <ul class="dropdown-menu" aria-labelledby="dropdown04">
                <li><router-link to="/todocategory" class="dropdown-item">Todo Category</router-link></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>    
    <router-view />
    <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
</template>

Вы даже можете увидеть, где я оставил все «примеры», потому что меня действительно не волнует, как это выглядит прямо сейчас: «Я могу убрать это позже», ха-ха!

Вы можете видеть, что я заменил ‹a href="$› Home ‹/a› из примера кода на наш тег ‹router-link to =” / home ”› Home ‹/router-link›, и это действительно так просто как тот.

Мы используем пример стандартной навигационной панели по умолчанию прямо из Bootstrap и просто обновляем его для работы с нашими тегами ‹router-link›!

Вы должны увидеть это в представлении «Выполнить» в своем проекте после сохранения.

Теперь давайте сделаем еще немного форматирования, чтобы сделать изображение немного красивее.

Давайте обновим наши страницы категорий Todo и приложений Todo. Сначала откройте /views/TodoCategory.vue. Я просто собираюсь заключить это в несколько тегов ‹div› со стилями, взятыми прямо со страницы Примеры начальной загрузки.

Вот мой обновленный TodoCategory.vue

<template>
  <div id="todocategory">
    <div class="container my-5">
      <h1>Add Todo Category</h1>
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> 
        <form>
          <!-- These are our input fields for creating a new Todo Item -->
          <input type="text" v-model="name" placeholder="Todo Category Name" class="form-control"/><br />
          <textarea v-model="description" placeholder="Enter Description" class="form-control"></textarea
          ><br />
          <button class="w-50 btn btn-primary btn-lg" v-on:click="createTodoCategory">Create Todo Category</button>
          <br /><br />
      </form>
      </div>
    </div>
    <!-- this is the area where we loop all todo items below -->
    <div class="container my-5">
      <table class="table">
        <thead>
          <th>Name</th>
          <th>Description</th>
          <th>Action</th>
        </thead>
        <tbody>
          <tr v-for="item in todocategory" :key="item.id">
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>[Future Edit Button]</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

Серьезно, это так же просто, как просмотреть исходный код или проверить понравившийся элемент на странице примеров начальной загрузки и просто бездельничать, пока он не будет выглядеть так, как вы хотите, на вашей собственной странице. Вы также можете увидеть, как выглядит наше новое меню навигации, наверху.

Теперь давайте обновим /views/Todo.vue, чтобы он соответствовал этому стилю.

<template>
  <div id="todo">
    <div class="container my-5">
      <h1>Todo App</h1>
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> 
        <form>
          <!-- These are our input fields for creating a new Todo Item -->
          <input type="text" v-model="name" placeholder="Todo name"  class="form-control"/><br />
          <select v-model="todoCategory" class="form-control">
            <option value="" disabled hidden>Select Todo Category</option>
            <option v-for="(item, id) in todocategory" v-bind:key="id" :value="item">{{item.name}}</option>
          </select><br />
          <textarea v-model="description" placeholder="Enter Description" class="form-control"></textarea
          ><br />
          <button class="w-50 btn btn-dark btn-lg" v-on:click="createTodo">Create Todo</button>
          <br /><br />
      </form>
      </div>
    </div>          
    <!-- this is the area where we loop all todo items below -->
    <div class="container my-5">
      <table class="table">
        <thead>
          <th>Name</th>
          <th>Category</th>
          <th>Description</th>
        </thead>
        <tbody>
          <tr v-for="item in todos" :key="item.id">
            <td>{{item.name}}</td>
            <td>{{item.todoCategory.name}} <br /> {{item.todoCategory.description}}</td>
            <td>{{item.description}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

Вот и все!! Теперь вы можете использовать любые элементы Bootstrap, которые хотите использовать, и вам даже не нужно было ничего устанавливать в свой проект, чтобы добраться туда!

Удачного взлома!

Больше контента на plainenglish.io