标签：about VUE name views 普陀区 vue import 相关 脚手架

1、修改左侧导航栏菜单结构

参照sky平台



Mock平台

公共参数
接口分类
接口管理

2、针对新增加的子页面在views目录下新建三个对应的vue文件

源码：
<el-aside width="200px">
          <el-menu
        default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          background-color="#545c64"
          text-color="#fff"
          style="height:100%"
          active-text-color="#ffd04b">
          <el-submenu index="a">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>Mock平台</span>
                </template>
                <el-menu-item index="public_data">公共参数</el-menu-item>
                <el-menu-item index="category">接口分类</el-menu-item>
                <el-menu-item index="interface">接口管理</el-menu-item>
              </el-submenu>
          <el-menu-item index="user">
              <i class="el-icon-menu"></i>
              <span slot="title">测试场景构造</span>
          </el-menu-item>
          <el-menu-item index="project">
              <i class="el-icon-setting"></i>
              <span slot="title">效能工具</span>
          </el-menu-item>
          <el-menu-item index="data">
              <i class="el-icon-setting"></i>
              <span slot="title">测试数据导航</span>
          </el-menu-item>
      </el-menu>

      </el-aside>
      

3、增加路由到对应的VUE文件

4、修改router.js里对应的routes路径

源码：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Category from './views/Category.vue'
import PublicData from './views/PublicData.vue'
import Interface from './views/Interface.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/Category',
      name: 'Category',
      component: () => import(/* webpackChunkName: "about" */ './views/Category.vue')
    },
    {
      path: '/PublicData',
      name: 'PublicData',
      component: () => import(/* webpackChunkName: "about" */ './views/PublicData.vue')
    },
    {
      path: '/Interface',
      name: 'Interface',
      component: () => import(/* webpackChunkName: "about" */ './views/Interface.vue')
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/project',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/user',
      name: 'one',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './components/one.vue')
    }
  ]
})

3、增加页面查询条件（接下来以Interface.vue为例写一个页面）

页面原型为下图：

1)、第一步参考页面划分布局：

<el-row>
      <el-col :span="4">
        1
      </el-col>
      <el-col :span="4">
         2
      </el-col>
      <el-col :span="2">
        3
      </el-col>
      <el-col :span="2">
        4
      </el-col>
    </el-row>
    <el-row>
      2
    </el-row>

2)、选择element里的input输入框组件

<el-col :span=4>
          <el-input v-model="queryType" placeholder="请输入查询条件"></el-input>
          </el-col>

3）、下拉选择框

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

4）、并且在script里增加变量

<script>
export default {
    data() {
    return {
        queryType:null,
        category:null,
      input: '',
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }]
        }
      }
 }
</script>

5）、添加搜索按钮组件

 <el-col :span=2>
     <el-button type="primary">搜索</el-button>
    </el-col>

6）、添加新建按钮组件，增加dialog弹框

<el-col :span=2>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          </el-col>   

 <el-col :span=2>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          </el-col>
 <el-dialog title="新建接口" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="接口名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="接口描述" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="接口url" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="自定义代码" :label-width="formLabelWidth">
      <el-input  type="textarea" v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>


 export default {
 data(){
 return{
dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },    
        formLabelWidth: '120px'
                }
        }
     }

7）、添加table组件

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

8）、到目前为止的效果图

标签：about,VUE,name,views,普陀区,vue,import,相关,脚手架
来源： https://blog.csdn.net/qq_30021989/article/details/115857854

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。