前言

最近公司项目需要做一个小型的填报的录入系统，根据业务的具体分析，采用了基于vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技术栈构建录入系统，同时也作为学习vue全家桶技术栈的一个学习记录。

目标

1. 配置登录界面
2. 配置路由信息

登录信息界面

新建login.vue组件，组件中使用了elementUI，因此要安装elementui，安装方法参见官网中安装方式，并在main.js中使用elementUI，如下代码所示：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

登录页面中html配置以下信息

<template>
  <div class="login-content">
    <h3>系统登陆</h3>
    <el-form :model="form" status-icon :rules="rules" ref="form" class="demo-ruleForm">
      <el-form-item prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入用户名" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input type="password" v-model.trim="form.pass" placeholder="请输入密码" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item prop="type" class="login-checked">
        <el-checkbox v-model="form.type" size="medium " false-label="false" true-label="true">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item class="login-submit-item">
        <el-button type="primary" class="login-submit" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: 'Login',
  data () {
    let checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: 'admin',
        pass: '1',
        type: true
      },
      rules: {
        name: [
          {validator: checkName, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      // 进行验证表单内容是否填写正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRequest('/login', {
            name: 'admin',
            pass: '1'
          }).then(res => {
            if (res.status === 200) {
              this.$router.push({path: '/'})
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .login-content {
    width: 310px;
    margin: 150px auto;
    color: #505458;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 25px 35px 15px;
    box-shadow: 0 0 25px #cac6c6;
    .demo-ruleForm {
      .login-checked {
        text-align: left;
      }
    }
    .login-submit-item {
      width: 100%;
      .login-submit {
        width: 100%;
      }
    }
  }
</style>

添加了提交事件，提交参数，调用了axios方法，此方法在后续中进行讲解封装。

配置路由

找到src文件夹下router文件夹下的index.js

进行导入创建的login组件，并在路由中配置，如下代码块，path：路由的路径，name：路由的名字，component：路由的组件

// 导入各个组件
import Login from '@/components/Login'
export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/404',
      component: NotFound,
      name: '',
      hidden: true
    },
    {
      path: '/',
      component: Index,
      iconCls: 'fa fa-id-card-o',
      children: [
        {path: '/user', component: User, name: '用户管理'}
      ]
    }
  ]
})

 如有子路由的情况下，配置children：且父组件中以/表示的根路径，且根路径中要包含元素<router-view></router-view>

<el-main>
    <!--子路由区域-->
    <transition name="fade" mode="out-in">
        <router-view></router-view>
    </transition>
</el-main>

最后

以上就是从容发箍为你收集整理的vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统环境部署（三）前言的全部内容，希望文章能够帮你解决vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统环境部署（三）前言所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。