Vue-学习阶段性回顾-编写一个简单的登陆页面
目录
前言
写这篇文章的目的是
学完了vue的语法相关，却仍对新建一个vuecli项目感到无从下手，
故在此进行整理。
前面的内容负责简单的介绍一下vue-cli，没有耐心的同学可以从2.3App.vue开始。
目标
写一个登陆页面
安装nodejs
官网地址：https://nodejs.org/zh-cn/
直接下载安装即可。
1. WebStorm新建项目
点击创建，在项目创建过程中右下角会提示你npm install，选择确认安装。
安装完成后项目结构如下：
点击运行（shift+f10）
访问http://localhost:5173/查看页面。
至此，第一步创建项目已经完成。
2. 解析初始化文件
2.1 index.html
阅读一个程序肯定是从入口处开始，我们打开index.html文件，可以看到如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
我们可以在代码里看到，index.html文件主要就两行代码
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
关键在于js引入了main.js文件，我们使用ctrl+左键，点击main.js直接跳转到main.js文件中。
2.2 main.js
打开main.js，可以看到如下代码：
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的，
一个应用需要被挂载到一个 DOM 元素中。
例如，如果我们想把一个 Vue 应用挂载到<div id="app"></div>，我们应该传递参数#app。
这部分属于基础文件，我们无需理会，只需要关注App.vue文件即可。
2.3 App.vue【重点】
我们将App.vue修改为
<template>
<div>
<h1>hello</h1>
</div>
</template>
，点击运行
可以看到一个vue项目页面的整体布局，或者说是首页，便是在App.vue中整合的。
那么什么是Vue文件呢？
vue文件就是一个（或局部）组件，主要包含三个标签：
<script>标签用来写js部分代码<template>用于写html组件<style>用于写css代码
至此，一个新建的vue-cli项目简单的介绍完毕，下面开始尝试编写一个登录页面。
3.一个简单的登陆页面
这是博客园的登陆页面，我们试图照抄。
3.1 创建登陆页面表单
<template>
<div>
<h1>博客园用户登录</h1>
<img src="#">
<p>代码改变世界</p>
<form action="#" method="post">
<button>密码登录</button>
<br>
<input type="text" name="username" placeholder="Username" required="" autofocus=""> <br>
<label>Username</label> <br>
<input type="password" name="password" placeholder="Password" required=""> <br>
<label>Password</label> <br>
<div>
<label>
<input type="checkbox" value="remember-me">记住我</label>
</div>
<button type="submit">登录</button>
<p>第三方登录/注册</p>
<p>没有帐户，立即<a href="#">注册</a></p>
</form>
</div>
</template>
3.2 安装bootstarpe
npm install --save-dev bootstrap
3.3 修改样式
3.3.1 修改index页面样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<style>
html,body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
}
</style>
<body style="background:darkgray">
<div id="app"></div>
<script src="/src/assets/js/index.js"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>
3.3.2 修改App.vue表单模板样式
<template>
<div class="text-center" style="background:ghostwhite;width: 500px">
<p>用户登录</p>
<img src="src/assets/img/bootstrap-solid.svg" alt="" width="72" height="72"/>
<p>代码改变世界</p>
<form class="form-signin" action="#" method="post">
<button class="btn btn-lg btn-primary btn-block bg-white border-white" style="color: black">密码登录</button>
<button class="btn btn-lg btn-primary btn-block bg-white border-white" style="color: black">短信登录</button>
<input type="text" name="username" class="form-control" placeholder="Username" required="" autofocus="">
<label class="sr-only">忘记登陆用户名</label>
<br>
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<label class="sr-only">忘记密码</label>
<br>
<div class="checkbox mb-3">
<label style="float: left">
<input type="checkbox" value="remember-me">记住我</label>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
<br>
<div>
<p style="float: left">第三方登录/注册</p>
<p style="float: right">没有帐户，立即<a href="#">注册</a></p><br>
</div>
</form>
</div>
</template>
<style>
.form-signin {
width: 100%;
max-width: 430px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 15px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.sr-only{
float:right;
}
</style>
