Конечно, мы можем построить все, что захотим, но если мы не можем сделать это красиво, в чем смысл?
Поверьте, я, как следующий программист, не умею все делать красиво. Слишком часто мы, как разработчики полного стека, тратим все свое время на то, чтобы получить желаемую функциональность, говоря: «Я вернусь и сделаю это довольно поздно», - а затем, к счастью, никогда не вернусь, чтобы сделать это красиво.
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