我的第一个项目(二)：使用Vue做一个登录注册界面

好家伙，

 

顶不住了，太多的bug，

本来是想把背景用canvas做成动态的，但是，出现了各种问题

为了不耽误进度，我们先把一个简单的登录注册界面做出来

 

来看看效果：

 

 （看上去还不错）

 

本界面使用Vue2(新建项目的时候记得把less勾上,项目里有用到)

 

1.项目目录:

 

 

2.MyLogin.vue组件代码如下:

(在绿色部分使用你想要的图片进行替换)

 

 

 

3.MyRegister代码如下:

 

 

4.路由

你已经是一个成熟的孩子了,要学会自己配路由

import Vue from "vue"
import VueRouter from "vue-router"
import pathArr from "@/router/pathArr.js";
//导入需要的组件
import Login from "@/components/MyLogin";
import Register from "@/components/MyRegister";
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path: '/',redirect: '/login'},
        //登录路由规则
        {path: '/login',component: Login},
        //后台主页路由规则
        
        //注册界面路由
        {path: '/register',component: Register},
        //背景页面

        
    ]
})

 

 

大致效果如下: