vue.js完成登录注册项目

vue.js完成登录注册项目

1.使用 Vue CLI 搭建 Vue 项目

打开 VS code，选择【文件】>【打开文件夹】打开本机的某个文件夹。选择【终端】>【新建终端】新建终端。

终端为 powershell 窗口，点击右侧的下拉框，选择【选择默认 Shell】。

终端

在弹出框中选择【Command Prompt】将终端的默认 Shell 改为 cmd。

选择终端shell

在终端窗口点击“加号图标”新建 cmd 窗口。

新建终端

在终端中执行以下命令新建 Vue 项目。

vue create login

选择【default（babel，eslint）】，按下回车键。

搭建Vue项目1

等待 Vue 项目构建完成，构建成功结果如下。

搭建Vue项目2

在终端中执行以下命令进入“login”文件夹。

cd .\login

2.在终端执行以下命令在改项目中安装 Vue Router 和 Element UI。

npm i element-ui vue-router -S

安装成功结果如下图。

安装Vue Router和Element UI

3.首先利用Element UI layout布局或者容器布局的方式完成页面布局

在入口文件main.js中引入element UI

import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

例如以下主要利用row col span24分栏和flex justify，设置好长宽和横向灵活居中对齐的布局

<template>
  <div class="register">
    <el-form class="form" :rules="rules" :model="form" ref="form" label-width="100px">
      <el-row type="flex" justify="center">
        <el-col :span="5">
          <el-form-item label-width="70px">
            <span>
              <font color="blue" size="3">注册登录页面</font>
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="5">
          <el-form-item label="用户名" label-width="80px" prop="name">
            <el-input class="item" v-model="form.name"></el-input>
          </el-form-item