任务 2 编写登录界面
任务目的
搭建 Vue 项目，使用 Vue.js 实现登录界面。在本机通过编写代码实现登录界面，在部署之前在本机测试页面效果。
任务步骤
1.使用 Vue CLI 搭建 Vue 项目
打开 VS code，选择【文件】>【打开文件夹】打开本机的某个文件夹。选择【终端】>【新建终端】新建终端。
终端为 powershell 窗口，点击右侧的下拉框，选择【选择默认 Shell】。
在弹出框中选择【Command Prompt】将终端的默认 Shell 改为 cmd。
在终端窗口点击“加号图标”新建 cmd 窗口。
在终端中执行以下命令新建 Vue 项目。
vue create login选择【default（babel，eslint）】，按下回车键。
等待 Vue 项目构建完成，构建成功结果如下。
在终端中执行以下命令进入“login”文件夹。
cd .\login在终端执行以下命令在改项目中安装 Vue Router 和 Element UI。
npm i element-ui vue-router -S安装成功结果如下图。
2.使用 Vue.js 编写登录界面
在软件的主界面选择【文件】>【打开文件夹】打开“login”文件夹。在左侧的【资源管理器】中选择【src】>【components】，鼠标右键单击在出现的菜单栏中选择【新建文件】，新建“login.vue”文件。
在“login.vue”文件中写入以下内容，并使用ctrl+s键保存。
<template>
<div class="login">
<el-form class="form" :rules="rules" :model="form" ref="form">
<h3>登录界面</h3>
<el-form-item label="用户名" label-width="80px" prop="name">
<el-input class="item" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" label-width="80px" prop="password">
<el-input
class="item"
type="password"
v-model="form.password"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
rules: {
name: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" }
]
}
};
},
methods: {
onSubmit() {
this.$refs["form"].validate(valid => {
if (valid) {
this.$router.push("/home");
} else {
return false;
}
});
}
}
};
</script>
<style scoped>
.login {
background-color: #bcdef3;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 40%;
margin-bottom: 20vh;
background-color: white;
border-radius: 2px;
padding: 5% 3%;
}
.item {
width: 75%;
}
</style>在同级目录下新建“home.vue”文件。
在“home.vue”文件中写入以下内容，并使用ctrl+s键保存。
<template>
<div class="home">
<h3>这是登录后的页面</h3>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.home {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>找到位于“src”文件夹下的“App.vue”文件并将文件的内容替换为以下内容，并使用ctrl+s键保存。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>打开位于“public”文件夹下的“index.html”文件并在“<head>”标签中插入以下内容，并使用ctrl+s键保存。
<style>
body {
margin: 0;
}
</style>在左侧的【资源管理器】中找到并打开“src”目录下找到“main.js”文件，将文件的内容替换为以下内容，并使用ctrl+s键保存。
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import VueRouter from "vue-router";
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(ElementUI);
const router = new VueRouter({
mode: "history",
routes: [
{ path: "/", redirect: "/login" },
{ path: "/login", component: () => import("@/components/login.vue") },
{ path: "/home", component: () => import("@/components/home.vue") }
]
});
new Vue({
render: h => h(App),
router
}).$mount("#app");3.实验验证
打开 VS code 的终端执行以下命令。
npm run serve打开本机的浏览器在地址栏输入“http://localhost:8080/”后按下回车键。浏览器中显示出使用Vue.js编写的登录页面。
输入用户名（任意 3-6 个字符）和密码（任意 6-12 个字符），点击【登录】按钮，页面可以跳转到另一页面。
学员评价