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>
登录页面完成
