升级到 Vue3 & 重构 login 页面

package.json

@@ -7,25 +7,24 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@nutui/nutui": "^3.1.20",
     "axios": "0.19.0",
-    "core-js": "^2.6.5",
+    "core-js": "^3.22.7",
     "exif-js": "^2.3.0",
     "image-conversion": "^1.1.9",
     "mockjs": "^1.1.0",
     "normalize.css": "7.0.0",
     "qrcodejs2": "^0.0.2",
-    "vant": "^2.1.1",
+    "vant": "^3.4.9",
-    "vue": "^2.6.10",
+    "vue": "^3.2.36",
-    "vue-router": "^3.0.3",
+    "vue-router": "^4.0.15",
     "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-service": "^3.11.0",
+    "@vue/cli-service": "^5.0.4",
-    "babel-plugin-import": "^1.11.0",
+    "babel-plugin-import": "^1.13.5",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.14"
   }
 }

src/main.js

@@ -1,37 +1,20 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { createWebHistory } from 'vue-router'
+import createRouter from './router'
 import App from './App.vue'
-import router from './router'
 import 'normalize.css/normalize.css'  // 重置、初始化css样式的库
 import '@/permission'                 // 挂载路由后添加路由拦截器（守卫 ）
 
-// import NutUI from "@nutui/nutui";
+// import Loading from 'globalComponents/Loading'
-// import "@nutui/nutui/dist/style.css";
+// import Toast from 'globalComponents/Toast'
-// Vue.use(NutUI)
+// Vue.use(Toast)                        //启用全局提示组件
-
+// Vue.use(Loading)                      //使用全局loading组件
-import Loading from 'globalComponents/Loading'
-import Toast from 'globalComponents/Toast'
-Vue.use(Toast)                        //启用全局提示组件
-Vue.use(Loading)                      //使用全局loading组件
-
-/**
- * 如果需要bus总线模式
- * this.$bus.$data.xxx = xxx
- * this.$bus.emit('change',data)
- * this.$bus.$on('change',data => console.log(data))
- * this.$bus.$off('change')
- */
-// import bus from './bus'
-// Vue.use(bus)                          //使用BUS总线模式，实现组件间任意传值
-
-Vue.config.productionTip = false      //生产模式下关闭vue在控制台的提示
 
 if (process.env.NODE_ENV == 'development'){
   require('./mock/index.js');
 }
 
-const vm = new Vue({
+export const vm = createApp(App)
-  router,
+const router = createRouter(createWebHistory())
-  render: h => h(App),
+vm.use(router)
-}).$mount('#app')
+vm.mount('#app')
-
-export default vm

src/permission.js

@@ -3,9 +3,9 @@ import getPageTitle from 'utils/getPageTitle'
 import { Checkrunner } from 'api/home'
 
 
-import Vue from 'vue';
+import { vm } from '@/main.js'
 import { Toast } from 'vant';
-Vue.use(Toast);
+// Vue.use(Toast);
 
 
 
@@ -42,6 +42,6 @@ Vue.use(Toast);
 
 
 //跳转完成后
-router.afterEach(() => {
+// router.afterEach(() => {
-    //to do something
+//     //to do something
-})
+// })

src/router.js

@@ -1,45 +1,45 @@
-import Vue from 'vue'
+import { createRouter } from 'vue-router'
-import Router from 'vue-router'
-import Home from './views/home'
 
+const routes = [
+  {
+    path: '/',
+    redirect:'/login'
+  },
+  {
+    path:'/login',
+    name:'Login',
+    component:() => import('./views/login'),
+    meta:{ title:'登陆' }
+  },
+  {
+    path:'/home',
+    name:'Home',
+    component:() => import('./views/home'),
+    meta:{ title:'人脸注册' }
+  },
+  {
+    path:'/photos',
+    name:'Photos',
+    component:() => import('./views/photos'),
+    meta:{ title:'' }
+  },
+  // {
+  //   path:'/QRCode',
+  //   name:'QRCode',
+  //   component:() => import('./views/QRCode'),
+  //   meta:{ title:'身份二维码' }
+  // },
+  // {
+  //   path:'/admin',
+  //   name:'Admin',
+  //   component:() => import('./views/admin'),
+  //   meta:{ title:'物资发放' }
+  // },
+]
 
-Vue.use(Router)
+export default function (history) {
-
+  return createRouter({
-export default new Router({
+    history,
-  routes: [
+    routes
-    {
+  })
-      path: '/',
+}
-      redirect:'/login'
-    },
-    {
-      path:'/login',
-      name:'Login',
-      component:() => import('./views/login'),
-      meta:{ title:'登陆' }
-    },
-    {
-      path:'/home',
-      name:'Home',
-      component:() => import('./views/home'),
-      meta:{ title:'人脸注册' }
-    },
-    {
-      path:'/photos',
-      name:'Photos',
-      component:() => import('./views/photos'),
-      meta:{ title:'' }
-    },
-    // {
-    //   path:'/QRCode',
-    //   name:'QRCode',
-    //   component:() => import('./views/QRCode'),
-    //   meta:{ title:'身份二维码' }
-    // },
-    // {
-    //   path:'/admin',
-    //   name:'Admin',
-    //   component:() => import('./views/admin'),
-    //   meta:{ title:'物资发放' }
-    // },
-  ]
-})

src/styles/variables.styl

@@ -25,18 +25,11 @@ hint()
 .home-wrap
     overflow hidden
     height: 100vh
-    width: 100%
-    .bottom-img
-        position absolute 
-        bottom 0px
-        width 100%
-        left 0
     .hint
         width 100%
         box-sizing border-box
         position absolute
         text-indent 2em
-        z-index 9999
         padding 10px
         background rgba(255,255,255,0.3)
         backdrop-filter: blur(30)
@@ -47,49 +40,36 @@ hint()
     .background-wrap
         position: fixed
         z-index: -1
-        // .background-image
     .top-brand-wrap
         color: white
         text-align: center
         margin-top: 15vh
     .info-card
         position relative
-        // z-index 999
         width 90%
         box-shadow: 0 4px 10px #00000012
-        -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,.07)
-        // background rgba(255, 255, 255, 0.7)
-        // backdrop-filter: blur(20px)
-        // -webkit-backdrop-filter: blur(20px)
         background white
-        margin 0 auto
+        margin 10vh auto auto auto
-        margin-top 10vh
+        .van-form
-        z-index 500
-        padding-bottom 30px
-        padding-top 30px
-        .form
             width 100%
             padding 30px
             box-sizing border-box
             position relative
             // z-index 999
-            .van-cell
+            .van-cell-group
-                height: 48px
+                margin: 30px auto
-                background: transparent
+                .van-cell
-                >>>input 
+                    background: transparent
-                    height 48px
+    .van-button
-                // >>>field__body
+        background linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
-    .button
+        box-shadow: 0 4px 10px rgba(250, 74, 25, 0.5)
-        background linear-gradient(135deg,#fa2c19 0%,#fa6419 100%)
         color white
         padding 10px
-        width 85%
-        text-align center
-        border-radius 25px
         border: 1px solid transparent
         margin-bottom: 20px
     .register
-        background linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%)
+        background: linear-gradient(135deg, rgb(255,158,13) 0%, rgb(255,167,13) 45%, rgb(255,182,13) 83%, rgb(255,190,13) 100%)
+        box-shadow: 0 4px 10px rgba(255, 167, 13, 0.5)
     .flex-container
         display flex
         flex-direction column

src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import router from '@/router'
-import vm from '@/main.js'
+import { vm } from '@/main.js'
 import { globalSuccessToast } from '@/settings'
 
 const service = axios.create({

src/views/login/index.vue

@@ -3,36 +3,26 @@
         <div class="background-wrap">
             <img class="background-image" src="@/assets/image/track.jpg" />
         </div>
-        <!-- <div class="top-bgimg-wrap">
-            <img class="top-img" src="@/assets/image/bgimg-top.png"/>
-            <div class="logo-wrap">
-                <img class="yidong-img" src="@/assets/image/yidong.png"/>
-                <img class="fiveG-img" src="@/assets/image/5g.png"/>
-            </div>
-        </div> -->
         <div class="top-brand-wrap">
             <h1 class="title">5G 赛道</h1>
         </div>
         <div class="info-card flex-container">
-            <van-form class="form">
+            <van-form>
                 <van-cell-group inset>
                     <van-field required v-model="formData.Name" name="姓名" label="姓名" clearable placeholder="请输入姓名" />
-                    <van-field required type='number' v-model="formData.Phone" name="姓名" label="姓名" clearable placeholder="请输入手机号" />
+                    <van-field required type='number' v-model="formData.Phone" name="手机号" label="手机号" clearable placeholder="请输入手机号" />
                 </van-cell-group>
+                <van-row gutter="20">
+                    <van-col span="12"> <van-button type="primary" block round @click="onLogin">登录</van-button> </van-col>
+                    <van-col span="12"> <van-button type="primary" class="register" block round @click="onRegister">注册</van-button> </van-col>
+                </van-row>
             </van-form>
-            <div class="button register" @click="onRegister">注册</div>
-            <div class="button" @click="onLogin">登陆</div>
         </div>
-        <!-- <div class="hint">
-            已使用“5G赛道”小程序完成人脸注册的用户，请直接输入注册时的姓名和手机号码，登陆并领取照片。
-        </div> -->
-        <!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
-        <!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
     </div>
 </template>
 
 <script>
-import { Field, Toast, CellGroup, Dialog } from 'vant';
+import { Form, Field, Toast, CellGroup, Dialog, Button, Col, Row } from 'vant'
 import { Login } from 'api/home'
 
 import imgs1 from '@/assets/image/imgs-01.jpg'
@@ -41,8 +31,14 @@ import imgs2 from '@/assets/image/imgs-02.jpg'
 export default {
     name:'Home',
     components:{
+        [Form.name]:Form,
         [Field.name]:Field,
+        [Toast.name]:Toast,
         [CellGroup.name]:CellGroup,
+        [Dialog.name]:Dialog,
+        [Button.name]:Button,
+        [Col.name]:Col,
+        [Row.name]:Row
     },
     activated(){