在浏览器中使用HTML引入VUE3 + ant-design-vue 4.x

taihom

已于 2024-06-11 11:26:12 修改

阅读量407

点赞数 3

文章标签： html vue.js 前端

于 2024-06-11 11:02:23 首次发布

本文链接：https://blog.csdn.net/taihom/article/details/139593610

版权

HTML引用VUE3 + ant-design-vue 4.x

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML引用VUE3 + ant-design-vue 4.x</title>
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    <link  type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet" >
    <script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
</head>

<body>
    <div id="app">
        <a-style-provider hash-priority="high">
            <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
                <template #bodyCell="{ column }">
                  <template v-if="column.key === 'operation'">
                    <a>action</a>
                  </template>
                </template>
            </a-table>
        </a-style-provider>
    </div>

<script>
    Object.assign(window, Vue);
    
    
    const vue3Composition = {
        setup() {
            
            const columns = ref([
              {
                title: 'Full Name',
                width: 100,
                dataIndex: 'name',
                key: 'name',
                fixed: 'left',
              },
              {
                title: 'Age',
                width: 100,
                dataIndex: 'age',
                key: 'age',
                fixed: 'left',
              },
              {
                title: 'Column 1',
                dataIndex: 'address',
                key: '1',
                width: 150,
              },
              {
                title: 'Column 2',
                dataIndex: 'address',
                key: '2',
                width: 150,
              },
              {
                title: 'Column 3',
                dataIndex: 'address',
                key: '3',
                width: 150,
              },
              {
                title: 'Column 4',
                dataIndex: 'address',
                key: '4',
                width: 150,
              },
              {
                title: 'Column 5',
                dataIndex: 'address',
                key: '5',
                width: 150,
              },
              {
                title: 'Column 6',
                dataIndex: 'address',
                key: '6',
                width: 150,
              },
              {
                title: 'Column 7',
                dataIndex: 'address',
                key: '7',
                width: 150,
              },
              {
                title: 'Column 8',
                dataIndex: 'address',
                key: '8',
              },
              {
                title: 'Action',
                key: 'operation',
                fixed: 'right',
                width: 100,
              },
            ]);
            
            const data = [];
            for (let i = 0; i < 100; i++) {
              data.push({
                key: i,
                name: `Edrward ${i}`,
                age: 32,
                address: `London Park no. ${i}`,
              });
            }
            
            //const count = ref(data)
            // 返回值会暴露给模板和其他的选项式 API 钩子
            return {
              data,
              columns
            }
        },
    }
    //初始化
    const app = createApp(vue3Composition).use(antd).mount("#app");
</script>
</body>
</html>

其他代码自行实现