原文链接

代码地址：https://github.com/Snowstorm0...

1 创立我的项目

关上cmd，输出ui命令：

vue ui

若没有反馈，可能是版本太低，须要卸载后重装：

npm uninstall vue-cli -g   #卸载npm install @vue/cli -g    #装置

执行ui命令胜利后，会呈现提醒：

Starting GUI...
Ready on http://localhost:8000

并会主动关上页面：

创立名为SpringAndVue-vue的我的项目，预设抉择“手动”；性能开启 Babel、Router、Vuex、Linter/Formatter；配置抉择“ESLint with error prevention only”；版本倡议应用 “vue2.0”。创立新我的项目。

通过cd进入目录，启动我的项目：

npm run serve

2 装置插件

2.1 element-ui

关上cmd，输出ui命令：

vue ui

在插件项搜寻，并点击装置。

vue2.0 抉择装置 “vue-cli-plugin-element”；vue3.0 抉择装置 “vue-cli-plugin-element-plus”。

2.2 axios

Terminal装置axios，每个新我的项目都须要装置：

# vue-cli2.0命令npm install axios# vue-cli3.0命令npm add axios

2.3 mockjs

Terminal装置mockjs

npm install mockjs

3 增加性能

3.1 login

创立 login.vue页面：

<template>    <div class="loginbBody">        <div class="loginDiv">            <div class="login-content">                <h1 class="login-title">用户登录</h1>                <el-form :model="loginForm" label-width="100px"                         :rules="rules" ref="loginForm">                    <el-form-item label="名字" prop="name">                        <el-input style="width: 200px" type="text" v-model="loginForm.name"                                  autocomplete="off" size="small"></el-input>                    </el-form-item>                    <el-form-item label="明码" prop="password">                        <el-input style="width: 200px" type="password" v-model="loginForm.password"                                  show-password autocomplete="off" size="small"></el-input>                    </el-form-item>                    <el-form-item>                        <el-button type="primary" @click="confirm">确 定</el-button>                    </el-form-item>                </el-form>            </div>        </div>    </div></template><script>    export default {        name: "login",        data(){            return{                loginForm:{                    name:'',                    password:''                },                // 输出信息长度验证                rules:{                    name: [                        { required: true, message: '请输出用户名', trigger: 'blur' },                        { min: 2, max: 5, message: '用户名长度在 2 到 5 个字符', trigger: 'blur' }                    ],                    password: [                        { required: true, message: '请输明码', trigger: 'blur' },                        { min: 2, max: 5, message: '明码长度在 2 到 5 个字符', trigger: 'blur' }                    ]                }            }        },        methods:{            // 登录后跳转到主页            confirm(){                this.$refs.loginForm.validate((valid) => {                    if (valid) { //valid胜利为true，失败为false                        //去后盾验证用户名明码，并返回token                        this.$axios.post('/login',this.loginForm).then(res=>{                            console.log(res.data)                            if(res.data.state==1){                                //存储token到本地                                this.$store.commit("SET_TOKEN",res.data.vData.token);                                //跳转到主页                                this.$router.replace('/home');                            }else{                                alert('用户名或明码谬误！');                                return false;                            }                        });                    } else {                        console.log('校验失败');                        return false;                    }                });            }        }    }</script><style scoped >    .loginbBody {        width: 100%;        height: 100%;        background-color: #B3C0D1;    }    .loginDiv {        position: absolute;        top: 50%;        left: 50%;        margin-top: -200px;        margin-left: -250px;        width: 450px;        height: 330px;        background: #fff;        border-radius: 5%;    }    .login-title {        margin: 20px 0;        text-align: center;    }    .login-content {        width: 400px;        height: 250px;        position: absolute;        top: 25px;        left: 25px;    }</style>

3.2 配置路由

在router.js中配置一级路由：

   {    path: '/login',    name: '登录',    component: () => import(/* webpackChunkName: "user" */ '../views/login.vue')   }

3.3 mockjs 模仿后盾

在没有后端代码的状况下，能够应用 mockjs 模仿后盾数据。

咱们应用 mockjs 模仿后盾登录验证，并返回token。

咱们设置登录的用户名和明码都是admin。

在 src 下新建 mock 文件夹，在 mock 文件夹中新建 mock.js ，内容如下：

//引入 npm 装置的 mockjsconst Mock = require('mockjs')   // 获取 mock.Random 对象const Random = Mock.Random;// 登录，此地址与login登录地址对应Mock.mock('/login','post', (param)=>{      let state=0;    let body = JSON.parse(param.body);    console.log(body)    let data;    //模仿用户名和明码都是 admin    if(body.name=='admin'&&body.password=='admin'){        state=1;        data = Mock.mock({            "token": "@guid()",//模仿token            "name": "@cname",//随机生成中文名字        });    }    return{        "state":state,        "vData":data    }});//退出Mock.mock('/logout','post', ()=>{    return {state:1}});

3.4 storejs

在 src/store/index.js 中增加 Vuex.Store 的属性：

export default new Vuex.Store({  state: {    token: '',    username: '代码的路'  },  getters: {  },  mutations: {    SET_TOKEN(state, token){      state.token = token ;      localStorage.setItem("token",token);    },    resetState(state){      state.token = '';      localStorage.clear();  }  },  actions: {  },  modules: {  }})

4 性能实现

在浏览器输出地址：http://localhost:8080/#/login

能够呈现登录界面：

输出用户名和明码 admin，即可进入主页：

点击头像呈现退出按钮，能够回到登录界面：

 
 

学习更多编程常识，请关注我的公众号：

代码的路