如何创建一个页面

步骤

1. 在 src/views/ 目录创建一个模块目录，例 customer

页面目录

所有业务页面都应改存放于 src/views/ 目录，并按照模块划分目录。如果有必要，可以在各模块目录内创建子目录以存放子模块页面。

2. 在上述步骤中创建的 customer 目录中创建 index.vue

入口页面

每个模块都应使用 index.vue 作为入口页面，子模块的入口也是如此。同时，请不要在文件标题上添加与模块目录同名的前缀，比如 customer-create.vue，因为模块目录已经指明了该目录下文件的目的。

3. 将页面加入到路由，以便可以通过菜单访问该页面。

添加页面路由

框架的路由位于 src/router/ 目录，配置方法参考 router

4. 刷新一下页面，现在可以看到侧边栏菜单中已经出现配置的路由了。

排除错误

此时如果页面无法加载或报错了，很可能是你配置的路由有错误或入口页面包含错误、缺少依赖引用等。

5. 接下来就可以进行页面开发了。

示例

你可以直接复制使用此处代码

<template>
  <page class="filter-table-demo" class-name="hw100">
    <panel
      :title-fixed="true"
      title="表具列表"
      class="h100 w-2-1"
    >
      <common-table
        v-model="params"
        :columns="columns"
        :filters="filters"
        :page="page"
        :table-setting="tableSetting"
        :list="data"
        :loading="loading"
        :actions="tableActions"
        class="p15 pb0"
        @select="rowSelect"
      >
        <template #meterNo-cell-prefix>#</template>
        <template #meterType-cell="{cell}">
          {{ meterTypeMap[cell] }}
        </template>
        <template #meterModel-cell-suffix="{cell}">
          {{ cell.indexOf('2018') > -1 ? '已停产' : '' }}
        </template>
      </common-table>
    </panel>
    <panel
      class="h100 w-2-1"
    >
      <action-toolbar :actions="formActions">
        <template #left>
          <span class="f16">表具详述</span>
        </template>
      </action-toolbar>
      <common-form
        ref="form"
        v-model="formData"
        :fields="formFields"
        class="pl15 pr0"
      />
    </panel>
  </page>
</template>

<script>
import { getMeterList } from '@/api/meter'

export default {
  name: 'filter-table-demo',
  data () {
    return {
      params: {},
      columns: [],
      filters: ['meterNo', 'meterType', 'meterStatus'],
      page: { total: 0, page: 1, length: 20 },
      tableSetting: {
        select: 'single'
      },
      tableActions: [],
      formActions: [],
      data: [],
      loading: false,
      formFields: [],
      formData: {}
    }
  },
  methods: {
    rowSelect (val) {
      console.info('row select =>', val)
      this.formData = val
    },
    getList () {
      this.loading = true
      getMeterList(this.params).then(response => {
        this.data = response.data.items
        this.page.total = response.data.total
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    }
  },
  watch: {
    params: {
      handler: function (val) {
        this.getList(val)
      },
      deep: true
    },
    formData: {
      handler: function (val) {
        console.info(JSON.stringify(val, null, 2))
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>