登录页搭建

package.json

@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.6.0",
     "vant": "^2.12.45",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/router/index.js

@@ -4,20 +4,28 @@ import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
+// 路由懒加载
+const Login =()=>import('../views/login/login.vue')
+
 const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login
+  },
   {
     path: '/',
     name: 'index',
     component: HomeView
   },
-  {
-    path: '/about',
-    name: 'about',
+  // {
+  //   path: '/about',
+  //   name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  // }
 ]
 
 const router = new VueRouter({

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-
-  </div>
-</template>

src/views/login/login.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="Login">
+    <div class="loginmain">
+      <div class="title">
+        <span>疫情防控平台</span>
+      </div>
+
+      <van-cell-group>
+        <van-field
+          v-model="value"
+          label="用户名："
+          placeholder="请输入用户名"
+        />
+        <van-field v-model="password" type="password" label="密码" />
+      </van-cell-group>
+      <div class="loginButton">
+        <van-button type="info">登录</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      value: "",
+      password: "",
+    }
+  },
+  methods:{
+
+  },
+};
+</script>
+
+<style scoped>
+.van-cell{
+    font-size: 16px;
+}
+.title{
+    display: flex;
+    justify-content: center;
+    font-size: 22px;
+    line-height: 20vw;
+    height: 20vw;
+}
+.Login span {
+  text-align: center;
+}
+.loginmain {
+  width: 80%;
+  margin: 0 auto;
+}
+.van-button--normal {
+  width: 25vw;
+  height: 12vw;
+  font-size: 16px;
+}
+.loginButton {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 2vw;
+}
+</style>