2.编写登录页面

1.项目创建完成后。开始编辑一个登录页面

 这个是我的目录文件

 首先要安装element-plus框架

这里使用 npm 安装

npm install element-plus --save

 之后在vue.config进行配置

const { defineConfig } = require("@vue/cli-service");
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  transpileDependencies: true,
  //eslint-loader es验证
  lintOnSave:false,
  css:{
    extract:true,
    loaderOptions:{
      sass: 
        {additionalData: `@import"~@/styles/main.scss";`}
    }
  },
  configureWebpack:{
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
});

然后就可以使用了。

然后再views里面新建文件夹login 在创建文件index.vue

<template>
    <div id="login">
      <div class="login-wrap">
        <ul class="menu-tab">
          <li v-for="(item,key) in menuTab" :key="key"  @click="toggleMneu(item)" :class="{'current':item.current}">
            {{item.text}}
          </li>
        </ul>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          label-position="top"
          :rules="rules"
          class="login-form"
          label-width="120px"
          status-icon
        >
          <el-form-item label="邮箱" prop="name" class="label">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="密码" prop="name" class="label">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item label="验证码" prop="name" class="label">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-input v-model="ruleForm.password" />
              </el-col>
              <el-col :span="4">
                <el-button type="success">Success</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      
    </div>
</template>
<script>
export default{
  name:"login",
  data(){
    return {
      menuTab:[
        {text:'登录',current:true},
        {text:'注册',current:false},
      ],
      ruleForm:{},
      isActive:0,
    }
  },
  method(){

  },
  methods:{
    toggleMneu(item){
      this.menuTab.forEach(i=>{
        i.current = false
      })
      item.current = true;
    },
    submitForm(){},
    resetForm(){}
  }
}
</script>
<style lang="scss">
#login{
    background-color: #344a5f;
    height: 100vh;
}
.login-wrap{
  width: 330px;
  margin: auto;
  .login-form{
    margin-top: 20px;
    label{
      display: block;
      font-size: 14px;
      color: #fff;
    }
  }
}
.menu-tab{
  text-align: center;
  li{
    display: inline-block;
    width: 88px;
    line-height: 36px;
    font-size: 14px;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
  }
  .current{
    background-color: rgba($color: #000000, $alpha: .1);
  }
}

</style>

之后在路由里面新增一个路由

{
    path: "/login",
    name: "login",
    component: () =>
      import("../views/login/index.vue"),
  },

然后访问路径可以进入登录页面