1.源码结构:

build下index.js为工程发布dist工具 

mock为接口数据模拟服务器

 node_modules为npm install 安装的nodejs依赖模块

 

 public为静态资源

 src不工程源码目录

tests为单元测试目录

 

 开发与生产环境文件

vue.config.js为工程配置文件

 

 登陆页面,登陆按钮点击事件调用完整流程:

 通过EL-BUTTON元素生成按钮并指定点击事件:  

@click.native.prevent="handleLogin"

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登陆</el-button>

 

 点击登陆后会触发事件函数: 

handleLogin

先验证用户名与密码合法性,然后再分发路由 user/login 跳转到路由表寻找对应的路由

handleLogin() { // 登陆处理// 先验证后回调this.$refs.loginForm.validate(valid => {// 用户名与密码验证通过if (valid) {this.loading = true// 路由分发this.$store.dispatch('user/login', this.loginForm).then(() => {// 路由跳转到/this.$router.push({ path: this.redirect || '/' })this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})}

路由会自动转向api接口,并执行login方法: 

 通过POST方法请求MOCK服务器接口

 MOCK服务器处理登陆请求,并根据令牌取用户数据

返回合法的用户数据:

 

token数据如下: