Getting started using Bootstrap

Let's begin by adding Bootstrap 4 as a dependency to our project, so we won't have to think about design and can focus on the functionality of our forms. 

Bootstrap is a popular open source toolkit that gives us some predefined classes and styles so that we can make our app look nice without having to worry much about styles.

To get Bootstrap installed and set up for our project, follow these steps:

  1. Open up the Terminal to your project's folder, and install the dependency with the following command:
> npm install bootstrap
  1. Awesome! This adds the package to our node_modules folder and package.json. Now, go ahead and import the necessary styles into src/main.js. Use the following command to do so:
import 'bootstrap/dist/css/bootstrap.min.css';

We're not going to be using any of Bootstrap's scripts, so we can live with only the minified CSS.

Let's do a little cleaning on our App.vue file because, right now, we only have some boilerplate codeā€”but we want to start fresh! So, let's begin the cleaning:

  1. Replace everything inside App.vue with the following code:
<template>
<div id="app">
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

  1. Go ahead and start up your development server by running the following on your Terminal:
> npm run serve
  1. Open up the link that the Terminal shows you (the one that says local) and you should see a blank screen in your browser.

Behold the blank canvas of the first steps to form greatness and stuff! Yaaas!

Let's move on and get working on the actual form. It's time for some code.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.244.201