使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(1.环境配置、实现登录功能)

1.前言

        技术栈：Vue全家桶+Element.ui组件库+Axios

        功能：具有登录、配置个人信息、修改个人头像、发布评论、发布动态等功能

话不多说，先看成品动图，也可点击此链接进行体验

二、环境配置

1.先打开VsCode创建一个项目文件夹，右键打开终端。输入指令：vue create bilibili

2.选择预设，我们选择自定义

3.选择配置文件，中间有一步是选择vue的版本，我忘记截图了，选择2.0x就行了

 4.开始，完成以上步骤后我们cd到目前的文件夹下，执行 npm run  serve

5.按住ctrl点击左键进入

6.然后我们ctrl+v先退出运行环境 然后下载element，选择Import on demand按需导入，选择zh-cn中文

 

 7.下载axios

三、初始化页面

首先我们要把views和components下的vue文件删除，在把router下的index.js和app.vue残留内容删除。views文件夹下再创建出home.vue和login.vue文件。

 app.vue文件内容  配置路由出口

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
 
}
</script>

<style>
body{
  background-color: rgb(248, 244, 244);
}
</style>

index.js文件内容  配置路由信息

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import login from '@/views/login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: login
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 四、登录功能

因为我们登录功能需要用到element.ui,所以我们要进入到element.ui官网找到from组件，plugins文件夹下的element.js文件也要一起进行配置。

 element.js

import Vue from 'vue'
import { Button, Input,Form,FormItem} from 'element-ui'

Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)

把from组件复制粘贴使用

login.vue代码

<template>
        <!--登陆页面-->
   <div class="login">
       <!-- 登录头部图片 -->
        <img src="@/assets/images/error.png" alt="">
    <div class="box">
      <span>使用账号登录CC视频</span>
      <div class="avatar_box">
          <!-- 登录头像 -->
          <img src="@/assets/images/cc.png" alt="">
      </div>
      <!-- from组件 登录框 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="55px"
        class="demo-ruleForm"
      >
      <!-- 用户名 -->
        <el-form-item label="账号" prop="user">
          <el-input class="admin" prefix-icon="el-icon-user-solid" type="text" v-model="ruleForm.user" autocomplete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="pass">
          <el-input class="password" prefix-icon="el-icon-lock" type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 账号密码初始数据
                ruleForm: {
                    user:"admin",
                    pass:"123456"
                },
                // 判断用户名和密码格式是否正确
                rules: {
                    user: [{ required:true, message:'请输入账号' ,trigger: 'blur' },
                           {min: 3 ,max: 10 ,message:'长度在3到10个字符之间', trigger: 'blur'}],
                    pass: [{ required:true, message:'请输入密码' ,trigger: 'blur'},
                        {min: 6 ,max: 15 ,message:'长度在6到15个字符之间', trigger: 'blur'}],
                }
            }
        }, 
        methods: {
            // 重置
            resetLoginForm() {
                this.$refs.ruleForm.resetFields();
            },
            login() {
                //判断登录格式是否正确
                this.$refs.ruleForm.validate(valid => {
                    if(valid){
                        let data = {
                            user:this.user
                        }
                        //把user保存到本地
                        localStorage.setItem('user',JSON.stringify(data));
                        //跳转到个人中心
                        this.$router.push('centre');
                    }else{
                        alert('登录格式不正确，请重新登录')
                    }
                })
            }
        },   
    }
</script>

登录页面完成