创建vue工程

npm install vue-cli -g

第二步创建文件夹router 和 views

第三步创建前端组件 Login.vue Main.vue

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}

</script>

<style scoped>

</style>

Main.vue

<template>
<h1>合理</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

第四步index.js配置路由

import Vue from "vue";
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
 
Vue.use(VueRouter)
 
export default new VueRouter({
 
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/Main',
      component: Main
    }
  ]
})