使用cdn引入的方式创建一个vue3单页面内容

m0_52320512

已于 2024-03-29 15:11:28 修改

阅读量373

点赞数 7

文章标签： vue.js javascript 前端

于 2024-03-27 23:02:04 首次发布

本文链接：https://blog.csdn.net/m0_52320512/article/details/137091955

版权

文章目录

一、完整代码如下
二、完成效果
三、注意事项
- 1、element plus使用中文语言包

一、完整代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 导入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入element plus样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 导入element plus -->
    <script src="https://unpkg.com/element-plus"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="content-box">
            <!-- 搜索 -->
            <div class="search">
                <el-space wrap>
                    <div>
                        <span>书名：</span>
                        <el-input v-model="bookName" clearable style="width: 240px" size="large" placeholder="请输入书籍名"
                            :prefix-icon="Search"></el-input>
                    </div>
                    <div>
                        <span>作者名：</span>
                        <el-input v-model="authorName" clearable style="width: 240px" size="large" placeholder="请输入作者名"
                            :prefix-icon="Search"></el-input>
                    </div>
                    <el-button type="success">查询</el-button>
                </el-space>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="tableRef" border :data="tableData" style="width: 100%" :height="tableHeight">
                    <el-table-column fixed prop="date" label="书名" width="180"></el-table-column>
                    <el-table-column prop="name" label="作者" width="180"></el-table-column>
                    <el-table-column prop="address" label="类别"></el-table-column>
                </el-table>
                <el-pagination :page-size="20" :pager-count="11" layout="total, prev, pager, next, jumper"
                    :total="100" />
            </div>
        </div>
    </div>
</body>

<script type="module">
    const { createApp, ref, onMounted } = Vue
    import zhCn from 'https://unpkg.com/element-plus/dist/locale/zh-cn.mjs'
    createApp({
        setup() {
            // table元素
            const tableRef = ref(null);
            // table高度
            const tableHeight = ref();

            const bookName = ref('');
            const authorName = ref('');
            const message = ref('Hello vue!')
            const tableData = ref([
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                }
            ])
            onMounted(() => {
                // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
                tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 125;
                // 监听浏览器高度变化
                window.onresize = () => {
                    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 125;
                };
            })
            return {
                message,
                tableData,
                bookName,
                authorName,
                tableRef,
                tableHeight
            }
        }
    }).use(ElementPlus, { locale: zhCn }).mount('#app')
</script>

<style>
    * {
        padding: 0;
        margin: 0;
        color: #606266;

        box-sizing: border-box;
    }

    .content-box {
        padding: 5px 15px;
        margin: auto;
        margin-top: 5vh;
        width: 50vw;
        height: 90vh;
        min-width: 720px;
        min-height: 400px;
        box-shadow: var(--el-box-shadow-lighter);
        background-color: #FAFCFF;
        /* background-color: var(--el-color-primary-light-9); */
    }

    .search {
        display: flex;
        justify-content: center;
    }

    .table {
        padding: 15px 30px;
    }
</style>
</style>

</html>

二、完成效果

完成效果示意图

三、注意事项

1、element plus使用中文语言包

由于element plus默认使用的是英文语言包，所以我们需要切换成中文语言包，如下所示：

import zhCn from 'https://unpkg.com/element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, { locale: zhCn })

值得注意的是需要在 script 标签上加上 type=“module” ，不然会报错
错误代码提示