Vue Js: Как создать простую форму входа и регистрации в приложении Vue js
В этом руководстве вы узнаете, как создать простую форму входа и регистрации в приложении Vue js.
В данном уроке вы шаг за шагом узнаете, как реализовать простые формы входа и регистрации в приложении Vue js с помощью bootstrap ui.
Пример формы входа и регистрации Vue Js
Просто выполните следующие действия и создайте форму входа и регистрации в приложении vue js.
Шаг 1. Создайте новое приложение Vue Js
На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение vue js:
vue create my-app
Шаг 2 - Установите Bootstrap 4
На этом шаге откройте свой терминал и выполните следующую команду, чтобы установить пакет начальной загрузки в приложение vue js:
cd my-app npm install bootstrap или yarn add bootstrap
Шаг 3 - Добавьте компоненты в Main.js
На этом этапе посетите каталог /src и откройте файл main.js. Затем импортируйте компоненты в main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Шаг 4 - Добавьте глобальный CSS
На этом этапе создайте папку css внутри папки src/assets, а затем создайте в ней файл main.css и вставьте в него следующий код:
* {
box-sizing: border-box;
}
body {
background: #2554FF !important;
min-height: 100vh;
display: flex;
font-weight: 400;
}
body,
html,
.App,
.vue-tempalte,
.vertical-center {
width: 100%;
height: 100%;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.vertical-center {
display: flex;
text-align: left;
justify-content: center;
flex-direction: column;
}
.inner-block {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.vertical-center .form-control:focus {
border-color: #2554FF;
box-shadow: none;
}
.vertical-center h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
label {
font-weight: 500;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7a7a7a;
margin: 0;
}
.forgot-password a {
color: #2554FF;
}
.social-icons {
text-align: center;
font-family: "Open Sans";
font-weight: 300;
font-size: 1.5em;
color: #222222;
}
.social-icons ul {
list-style: none;
margin: 0;
padding: 0;
}
.social-icons ul li {
display: inline-block;
zoom: 1;
width: 65px;
vertical-align: middle;
border: 1px solid #e3e8f9;
font-size: 15px;
height: 40px;
line-height: 40px;
margin-right: 5px;
background: #f4f6ff;
}
.social-icons ul li a {
display: block;
font-size: 1.4em;
margin: 0 5px;
text-decoration: none;
}
.social-icons ul li a i {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.social-icons ul li a:focus i,
.social-icons ul li a:active i {
transition: none;
color: #222222;
}
Шаг 5 - Создание компонентов
На этом этапе вам нужно создать компоненты входа и регистрации в вашем приложении vue js.
Итак, зайдите в каталог components и создайте в нем файл login.vue. Затем добавьте в него следующий код:
<template>
<div class="vue-tempalte">
<form>
<h3>Sign In</h3>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Sign In</button>
<p class="forgot-password text-right mt-2 mb-4">
<router-link to="/forgot-password">Forgot password ?</router-link>
</p>
<div class="social-icons">
<ul>
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Затем перейдите в каталог components и создайте файл registration.vue. Затем добавьте в него следующий код:
<template>
<div class="vue-tempalte">
<form>
<h3>Sign Up</h3>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control form-control-lg"/>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Sign Up</button>
<p class="forgot-password text-right">
Already registered
<router-link :to="{name: 'login'}">sign in?</router-link>
</p>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Затем перейдите в каталог components и создайте файл ForgotPassword.vue. Затем добавьте в него следующий код:
<template>
<div class="vue-tempalte">
<form>
<h3>Forgot Password</h3>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control form-control-lg" />
</div>
<button type="submit" class="btn btn-dark btn-lg btn-block">Reset password</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
Шаг 6 - Включите Vue Router
На этом этапе вам нужно включить маршрутизатор в приложении vue. Посетите каталог router/ и откройте файл index.js, затем добавьте в него следующий код:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'signup',
component: () => import('../components/Registration.vue')
},
{
path: '/login',
name: 'login',
component: () => import('../components/Login.vue')
},
{
path: '/forgot-password',
name: 'forgot-password',
component: () => import('../components/ForgotPassword.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Шаг 7 - Обновите App.vue
На этом этапе вам нужно добавить следующий код в файл app.vue:
<template>
<div class="vue-tempalte">
<!-- Navigation -->
<nav class="navbar shadow bg-white rounded justify-content-between flex-nowrap flex-row fixed-top">
<div class="container">
<a class="navbar-brand float-left" href="https://makecodes.ru/vue/" target="_blank">
MakeCodes - Vue.js
</a>
<ul class="nav navbar-nav flex-row float-right">
<li class="nav-item">
<router-link class="nav-link pr-3" to="/login">Sign in</router-link>
</li>
<li class="nav-item">
<router-link class="btn btn-outline-primary" to="/">Sign up</router-link>
</li>
</ul>
</div>
</nav>
<!-- Main -->
<div class="App">
<div class="vertical-center">
<div class="inner-block">
<router-view />
</div>
</div>
</div>
</div>
</template>
В этом руководстве вы узнали, как создать простую форму входа и регистрации в приложении Vue.js.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.