Ant Design Vue UI Library

import { createApp } from 'vue';
import { Button, ConfigProvider, Table, message } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const App = {
  setup() {
    const columns = [
      { title: 'Name', dataIndex: 'name', key: 'name' },
      { title: 'Age', dataIndex: 'age', key: 'age' },
      { title: 'Address', dataIndex: 'address', key: 'address' },
    ];

    const data = [
      { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
      { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
      { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
    ];

    const showMessage = () => {
      message.info('Hello from Ant Design Vue!');
    };

    return {
      columns,
      data,
      showMessage,
    };
  },
  template: `
    <ConfigProvider>
      <div style="padding: 24px;">
        <h1>Ant Design Vue Quickstart</h1>
        <Button type="primary" @click="showMessage">Show Message</Button>
        <br/><br/>
        <Table :columns="columns" :data-source="data" />
      </div>
    </ConfigProvider>
  `,
};

createApp(App)
  .use(Button)
  .use(ConfigProvider)
  .use(Table)
  .mount('#app');

// To run this, create an index.html with <div id="app"></div> and include a script tag for this code.
// Ensure you have Vue 3 and ant-design-vue installed in your project.
// e.g., <script type="module"> // Your quickstart code </script>