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

已于 2024-03-29 15:11:28 修改
阅读量669 收藏 2
点赞数 7
文章标签： vue.js javascript 前端
于 2024-03-27 23:02:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52320512/article/details/137091955
版权

文章目录

一、完整代码如下

<!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” ，不然会报错
错误代码提示

m0_52320512
关注
[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）
Java 技术专栏，从入门到精通，熟悉企业级开发
07-14 2567
某天张三对小花说，我需要在一台新电脑上实现一个前端的漂亮页面：比如京东手机首页(m.jd.com)。 小花这时吭哧吭哧的去新电脑上安装nodejs、npm，然后在本地使用npm构建vue3项目，在项目里下载安装element-plus、axios。下一步进入编码阶段，写好的文件最后打包dist文件，放在nginx里去运行。一套流程走下来，耗时耗力，此时我们应该使用更简单的方法来构建这种单页面的项目：单页面html直接引入Vue3。
CDN引入Vue3
qq_39196447的博客
04-25 1167
注意：我们打开bootcdn网站，发现会有很多版本的，例如vue.global.prod.js、vue.esm-browser.min.js等。注意几个关键词，其中global是指提供一个全局的Vue属性、esm-browser是可以使用。在html的内引入，好似下面这样，我这边使用了。，因为比较顺眼，主要官网中提供的CDN很容易挂。
vite3+vue3 项目打包优化三 — CDN加速、文件压缩
前端知识分享喵
05-24 2385
内容分发网络（Content Delivery Network，简称 CDN），是构建在数据网络上的一种分布式内容分发网，它可以让用户从最近的服务器请求资源，以提升网络请求的响应速度。：一但依赖网站出现问题，我们的项目也就不行了，建议留下备用方案，以便维护。把打包好的项目放入服务器目录，服务器开启 gzip 服务，这样通过项目地址就可以在浏览器中进行访问了。需要注意的是，浏览器解压也是需要时间的，如果项目体积不是很大的话，不建议采用 gzip 进行压缩
vue使用cdn方式
最新发布
mffandxx的博客
10-08 238
【代码】vue使用cdn方式。
Vue3渐进式增强，运用CDN在项目中引入Vue3，超简单
m0_46313004的博客
02-06 4949
Vue3渐进式增强，运用CDN在项目中引入Vue3，超简单。根组件、组件通信、elementplus引入均有介绍。
使用CDN方式创建Vue3.0应用程序
pan_junbiao的博客
06-26 963
CDN 的全称是 content delivery network，即内容分发网络。它是构建在现在的互联网基础之上的一层智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发和调度等功能模块，使用户就近获取所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。在项目中使用 Vue.js 时可以使用 CDN 的方式。这种方式很简单，只需要选择一个提供稳定 Vue.js 链接的 CDN 服务商即可。下面将使用使用CDN方式，创建一个 Vue3.0 程序。
Vue项目使用CDN优化首屏加载
weixin_34159110的博客
03-31 1157
前言 作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。 在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译...
Vue3项目使用cdn加速
weixin_45732455的博客
06-11 4226
vue3项目使用cdn加速
使用CDN的方式使用Vue 和 iview构建vue项目
热门推荐
追逐丶的博客
01-28 1万+
使用CDN的方式使用Vue 和 iview构建vue项目一、CDN的方式是什么二、为什么采用cdn的方式三、过程1 引入vue.js和iview。2 基本功能3 组件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaT......
HTML-引入Vue3和Element Plus
04-24
这里，我们首先从Vue3的全局对象中导入`createApp`函数，然后调用它创建一个Vue应用实例。接着，通过`app.use(ElementPlus)`注册Element Plus，使其所有组件可以在Vue实例中使用。最后，将Vue实例挂载到页面上的`#...
vue实现todolist单页面应用
11-29
在Vue.js中构建一个Todo List单页面应用是一个很好的学习实践，可以帮助初学者理解Vue的核心概念。下面我们将详细探讨如何利用Vue实现这个应用。 首先，我们需要引入Vue.js库。对于初学者，通过`<script>`标签引入...
基于vue3+element-plus的一个物资后台管理系统源码.zip
06-15
这个“基于vue3+element-plus的一个物资后台管理系统源码.zip”文件包含了使用Vue3和Element Plus构建的物资后台管理系统的完整源代码。 在物资后台管理系统中，通常会包含以下关键知识点： 1. **Vue3 Composition...
Vue----单页面应用程序
emmmm.....
04-29 885
文章目录1 单页面应用程序1.1 什么是单页面应用程序1.2 单页面应用程序的特点1.3 单页面应用程序的优缺点1.3.1 单页面应用程序的优点1.3.2 单页面应用程序的缺点1.4 如何快速创建 vue 的 SPA 项目 1 单页面应用程序 1.1 什么是单页面应用程序 单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。 1.2 单页面应用程序的特点
vue3在单页面使用
Linlietao0587的博客
02-10 606
【代码】vue3在单页面使用。
单页面使用vue3
weixin_49295874的博客
12-07 1758
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="(item,index) in brands" :key="index"> &l
通过CDN方式引入VUE3
weixin_46011719的博客
06-12 706
通过CDN方式引入VUE3的基础使用
vue-day01 使用cdn引入使用
m0_63622279的博客
11-19 6338
用于对不同的点击事件做不同的处理。一个简单的点击事件的例子：
Vue3入门之创建vue3的单页应用(vite+vue)
分享式获得也是一种学习的态度
07-10 1287
每个人都有惰性，但不断学习是好好生活的根本，共勉！燕山雪花大如席，片片吹落轩辕台。——《北风行》
vue cdn引用
MoRan_Lei的博客
03-29 3087
vue cdn引入使用
一个简单vue模板单页面html
02-07
Vue.js 是一个构建用户界面的渐进式框架，易于使用且功能丰富。这是一个简单的 Vue 模板单页面 HTML： ``` <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello Vue!' } } } </script> <style> /* 样式定义 */ </style> ``` 其中 `template` 标签中是 HTML 模板，`script` 标签中是 JavaScript 代码，`style` 标签中是 CSS 样式。 使用 Vue.js 时，通常会在 HTML 中引入 Vue.js 库，然后使用 `new Vue` 方法创建 Vue 实例，并将实例绑定到一个 HTML 元素上： ``` <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> ``` 在上面的示例中，Vue 实例会将模板中的 `{{ message }}` 替换为 `data` 中的 `message` 值，也就是 "Hello Vue!"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值