vue create vue-router-demo

您可以使用以下命令来创建一个基于 Vue.js 的 Vue Router demo：

vue create vue-router-demo

这将使用 Vue CLI 创建一个新的 Vue 项目，并提示您选择一些配置选项。确保在选择配置时包括 Vue Router 作为插件。完成后，您将得到一个包含 Vue Router 的基本项目结构。

相关问题

基于vue3 ts element-plus生成表格分页查询配置

好的，我们来一步步实现基于Vue3、TypeScript和Element Plus的表格分页查询配置。

1. 首先我们需要安装Vue3、Vue Router、Element Plus和Axios等依赖：

npm install vue@next vue-router@4.0.0-beta.8 element-plus@next axios

2. 在`main.ts`中引入Vue、VueRouter、Element Plus和Axios：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import axios from 'axios'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.mount('#app')

3. 在`src/components`目录下创建一个`Table.vue`组件，用来展示表格数据：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    tableData() {
      return this.data.map(item => {
        const row = {}
        this.columns.forEach(column => {
          row[column.prop] = item[column.prop]
        })
        return row
      })
    }
  }
})
</script>

4. 在`src/components`目录下创建一个`Pagination.vue`组件，用来展示分页控件：

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleCurrentChange(currentPage: number) {
      this.$emit('update:currentPage', currentPage)
    },
    handleSizeChange(pageSize: number) {
      this.$emit('update:pageSize', pageSize)
    }
  }
})
</script>

5. 在`src/views`目录下创建一个`TableDemo.vue`视图组件，用来展示表格和分页控件：

<template>
  <div>
    <el-form :inline="true" :model="query" class="table-demo__form">
      <el-form-item v-for="field in fields" :key="field.prop" :label="field.label">
        <el-input v-model="query[field.prop]" placeholder="请输入"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
    </el-form>
    <Table :columns="columns" :data="data"></Table>
    <Pagination :currentPage.sync="currentPage" :pageSize.sync="pageSize" :total="total"></Pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import Table from '@/components/Table.vue'
import Pagination from '@/components/Pagination.vue'

export default defineComponent({
  components: {
    Table,
    Pagination
  },
  setup() {
    const fields = [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' }
    ]
    const columns = [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      { prop: 'gender', label: '性别' }
    ]
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const data = ref([])

    const query = ref({
      name: '',
      age: '',
      gender: ''
    })

    const fetchData = async () => {
      const res = await axios.get('/api/users', {
        params: {
          ...query.value,
          page: currentPage.value,
          size: pageSize.value
        }
      })
      data.value = res.data.items
      total.value = res.data.total
    }

    const handleSearch = () => {
      currentPage.value = 1
      fetchData()
    }

    fetchData()

    return {
      fields,
      columns,
      currentPage,
      pageSize,
      total,
      data,
      query,
      handleSearch
    }
  }
})
</script>

<style>
.table-demo__form {
  margin-bottom: 20px;
}
</style>

6. 在`src/router/index.ts`中配置路由：

import { createRouter, createWebHashHistory } from 'vue-router'
import TableDemo from '@/views/TableDemo.vue'

const routes = [
  {
    path: '/',
    name: 'TableDemo',
    component: TableDemo
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

7. 在`public`目录下创建一个`api`目录，用来模拟后端接口：

// api/users.json
{
  "total": 100,
  "items": [
    { "name": "张三", "age": 18, "gender": "男" },
    { "name": "李四", "age": 20, "gender": "女" },
    { "name": "王五", "age": 22, "gender": "男" },
    { "name": "赵六", "age": 24, "gender": "女" },
    { "name": "钱七", "age": 26, "gender": "男" }
  ]
}

8. 在`package.json`中添加一个`dev`命令，用来启动开发服务器：

{
  "scripts": {
    "dev": "vite"
  }
}

9. 启动开发服务器并访问`http://localhost:3000/`，就可以看到我们的表格和分页控件了。

以上就是基于Vue3、TypeScript和Element Plus的表格分页查询配置的实现步骤。