Html 引入使用 Element-ui、Vue

最新推荐文章于 2025-06-07 22:42:40 发布
原创 最新推荐文章于 2025-06-07 22:42:40 发布
· 7.3k 阅读 · 19 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #vue.js

因为Element-ui是基于Vue的框架，所以要想正常可以使用Element-ui,必须在其脚本引用之前先引用Vue脚本

直接代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../Import/vue.js"></script> <!--在上-->
    <link rel="stylesheet" href="../Import/element-ui-index.css">
    <script type="text/javascript" src="../Import/element-ui-index.js"></script>
</head>
<body>
<div>
    <div id="app">
        <el-button>按钮</el-button>
        <div>{{a}}</div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                a:'成功引入Vue + element-ui',
            }
        }
    })
</script>
</html>

浏览器运行结果：

其中我是将Vue和element-ui相关的文件直接下载到本地的，链接如下：

Element UI 
https://unpkg.com/element-ui/lib/theme-chalk/index.css
https://unpkg.com/element-ui/lib/index.js

Vue
https://cdn.baomitu.com/vue

 

【粉丝福利社】微信小程序与云开发从入门到实践
时光隧道
10-12 4万+
近年来，微信小程序这一名词越来越火，其背靠着微信庞大的闭环生态，一经问世就得到了极大的关注。小程序是一种无须专门下载，运行在微信平台内部的微型程序，自2017年1月小程序正式上线到目前为止，其已经更新迭代了多个版本，功能也越来越强大。小程序为人们的生活提供了诸多的便利，在自动售卖机上购买商品、使用共享单车、观看视频与热门资讯，以及听音乐、上网课等生活服务都可以在小程序上完成。
【愚公系列】《微信小程序与云开发从入门到实践》037-文件下载与上传
时光隧道
09-22 4万+
随着小程序的不断发展，它们已经成为了用户日常生活中不可或缺的工具。无论是购物、社交还是信息分享，小程序都在其中发挥着重要的作用。在这些功能的背后，文件的下载与上传是实现数据交互和用户体验的重要环节。在这篇文章中，我们将深入探讨如何在小程序中实现文件的下载与上传。我们将介绍相关的API使用方法、操作步骤、注意事项，以及一些最佳实践，帮助开发者更高效地处理文件操作。无论是用户上传图片、文档，还是从服务器下载资源，掌握这些技术都将为小程序的功能拓展提供强有力的支持。小程序拥有一套基于用户维度进行隔离的文件系统。
【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件
时光隧道
09-05 5万+
在微信小程序的开发旅程中，基础功能组件是构建应用的基石。这些组件不仅提供了常见的用户交互功能，还帮助开发者快速实现丰富的应用场景。无论是按钮、输入框，还是导航栏、列表等，这些基础组件的合理运用都能大大提升用户体验和开发效率。本篇文章将深入探讨微信小程序的基础功能组件，详细介绍它们的特性、使用方法以及最佳实践。我们将结合实际案例，帮助你理解如何灵活运用这些组件，以满足不同的业务需求和用户期望。所谓功能组件，是指为页面提供功能支持的基础组件。通过容器组件将功能组件进行包装即可扩展出更复杂的自定义组件。
【愚公系列】《微信小程序与云开发从入门到实践》012-页面容器组件
时光隧道
09-01 5万+
在微信小程序的开发中，页面容器组件扮演着至关重要的角色。作为构建小程序界面的基本单位，页面容器组件不仅负责页面的布局和结构，还帮助开发者有效管理内容的展示和交互。合理使用页面容器组件，可以让你的应用界面更加清晰、整洁，提升用户体验。本篇文章将深入探讨微信小程序中的页面容器组件，详细介绍其类型、常用属性及实际应用场景。我们将通过具体实例，帮助你理解如何灵活运用页面容器组件，设计出符合用户需求的高质量小程序界面。
【愚公系列】《微信小程序与云开发从入门到实践》020-多媒体组件
时光隧道
09-07 5万+
在微信小程序的开发中，多媒体组件为应用增添了丰富的交互体验和视觉效果。无论是音频、视频，还是图片展示，这些多媒体元素不仅能够吸引用户的注意力，还能有效传达信息和情感。随着用户对内容质量和互动性的要求不断提高，掌握多媒体组件的使用显得尤为重要。本篇文章将深入探讨微信小程序中的多媒体组件，详细介绍每种组件的特性、使用方法和最佳实践。我们将展示如何通过这些组件实现动态的内容展示，提升用户的参与感和体验，同时分享一些实用的开发技巧和注意事项。
【愚公系列】《微信小程序与云开发从入门到实践》029-自定义组件基础
时光隧道
09-15 4万+
随着移动互联网的快速发展，微信小程序作为一种新兴的应用形态，已经成为了众多开发者和企业的重要选择。它不仅拥有广泛的用户基础，还具备轻便、便捷的特点，能够实现丰富的功能和良好的用户体验。而在小程序的开发过程中，自定义组件的使用则是提升代码复用性和维护性的重要手段。本文将深入探讨微信小程序自定义组件的基础知识。我们将为您介绍自定义组件的概念、创建方法以及使用场景，帮助您在小程序开发中更高效地构建复杂的用户界面。无论您是小程序开发的新手，还是希望进一步提升开发技能的老手，相信本文都能为您提供有价值的参考。
【愚公系列】《微信小程序与云开发从入门到实践》025-体验WeUl基础组件
时光隧道
09-08 5万+
随着微信小程序的普及，越来越多的开发者希望借助其强大的功能和便捷的用户体验，打造出更具吸引力的应用。而在小程序的开发过程中，UI设计则是提升用户体验的关键所在。WeUI，作为一套为微信场景设计的基础组件库，提供了丰富的UI组件和设计规范，帮助开发者快速构建符合微信风格的优雅界面。本篇文章将带你深入体验 WeUI 基础组件，介绍其核心功能和使用方法。我们将从 WeUI 的基本概念入手，逐步展示如何在微信小程序中集成和使用这些组件，包括按钮、表单、对话框、列表等常用元素。
【愚公系列】《微信小程序与云开发从入门到实践》011-滑块容器组件
时光隧道
09-01 5万+
在微信小程序的开发过程中，用户体验的提升往往依赖于优秀的界面设计和交互效果。滑块容器组件作为一种常用的UI组件，能够实现内容的横向滑动展示，为用户提供直观而灵活的浏览体验。无论是在产品展示、图片浏览，还是在信息分类中，滑块容器都能有效地组织和呈现信息，让用户在有限的空间内获取更多的内容。本篇文章将深入探讨微信小程序中的滑块容器组件，详细介绍其基本用法、常用属性及应用场景。我们将通过实例分析，帮助你理解如何灵活运用滑块容器组件，提升小程序的交互性和视觉效果。
【愚公系列】《微信小程序与云开发从入门到实践》008-WXML与WXSS
热门推荐
时光隧道
08-30 6万+
在微信小程序的开发中，WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）是两个至关重要的技术，它们分别负责小程序的结构与样式设计。WXML作为微信小程序的标记语言，类似于HTML，帮助开发者定义页面的布局和结构；而WXSS则是其样式表语言，提供了丰富的样式设置功能，使得小程序的界面更加美观和用户友好。随着小程序的迅速普及，掌握WXML与WXSS的使用技巧，已成为每位开发者必备的技能。
微信小程序带参分享、链接功能
chaosama的博客
06-07 281
vue3的话可以获取当前页数据重写onShareAppMessage，vue2或原生小程序则需要把请求写在钩子里并加入async\await即可。一般来说搜这个问题都是因为自定义分享失效了或没等请求数据回来就已经开始执行分享了导致分享时参数没有跟上。分享链接的功能是右上角点...然后复制链接，可以直接点击。query就是参数，直接在onload里面接收就可以。这种链接直接从其他地方跳转到小程序。带参分享的话就需要自定义分享。
Cursor + Claude 4：微信小程序流量主变现开发实战案例
程序员陆通
06-03 1223
本文介绍了利用Cursor编辑器与Claude 4 AI助手开发微信小程序的完整流程，重点讲解"每日运势"小程序的流量主变现实现。通过星座运势、塔罗占卜等高粘性内容吸引用户，合理布局Banner广告、激励视频等广告位实现收益。文章详细展示了小程序初始化、广告模块集成、云函数开发等关键技术实现，并分享了3个月运营后的变现数据（月收入8000元，点击率3.2%）。作者强调平衡用户体验与商业价值的重要性，建议开发者从垂直领域切入，借助AI工具提升效率，建立数据分析体系，实现可持续增长。这套方法
ThingsCloud事物云平台搭建-微信小程序
最新发布
06-07 495
当前文章是作为一个通用案例，介绍如何快速使用 ThingsCloud云平台 以及 利用 ThingsCloud云平台平台的框架快速设计手机APP和微信小程序。 可以快速让硬件接入，实现硬件上云，完成物联网项目的开发。
uniapp 开发企业微信小程序，如何区别生产环境和测试环境？来处理不同的服务请求
向着太阳迎着光
06-03 771
在 uniapp 开发企业微信小程序时，区分生产环境和测试环境是常见需求。以下是几种可靠的方法，帮助你根据环境处理不同的服务请求：使用 uniapp 的 条件编译 语法，在代码中标记不同环境的配置。 2. 创建配置文件 3. 在请求中使用配置 二、使用自定义环境变量（更灵活） 在 中定义不同环境的启动命令。 2. 创建环境配置文件 3. 在请求拦截器中使用 三、企业微信特有的环境区分 利用企业微信的 AgentId 或 企业ID 区分环境。 四、通过 URL 参数区分（适合开发调试） 在开发时，通
微信小程序动态组件加载的应用场景与实现方式
胡西风的博客
06-04 609
微信小程序动态组件加载实现与应用。通过require引入组件定义，实例化后手动管理生命周期、数据绑定和事件监听。示例展示了条件渲染动态按钮组件，包括颜色修改和点击事件处理。注意事项包括：手动触发生命周期、WXML模板结合、性能优化建议。建议复杂场景使用Component.createInstance()新API。动态组件适合按需加载和复杂交互，但需权衡性能与静态组件优势。
微信小程序动态效果实战指南：从悬浮云朵到丝滑列表加载
weixin_45917851的博客
06-06 815
小红书爆款交互设计解析，附完整代码！
第六个微信小程序：教师工具集
weixin_42771529的博客
06-05 426
计划如：新建一个组件实现读取一个配置文件，配置文件一级目录目前为通用/语文/数学/英语/体育 后期可手动添加。需要构建api服务了，暂停一下，保存一下。我要构建一个针对视频提取的apis服务。5.建立了一个rules,方便使用，但不清楚效果，目前是第一次自己使用。我要开发一个教师工具集的微信小程序，首先规划一个配置文件。在通用下一层有：视频提取、音频提取两个子项，其他暂时为空。将读取的结果显示在pages/index/index下。看看用哪个UI库，不能永久停留吧。源于工作需要，下面开始。
3D动画在微信小程序的实现方法
爱分享的程序员
06-04 1004
微信小程序支持通过多种方式实现3D动画效果，主要包括使用CSS3、WebGL及第三方库。
婚恋小程序直播系统框架搭建
ALLSectorSorft的博客
06-03 1442
摘要：本文详细阐述了一个婚恋小程序直播系统的设计与实现方案。系统采用前后端分离架构，前端基于微信小程序框架，后端使用Node.js+Express+Socket.io技术栈。前端实现了直播间列表展示、视频播放和互动功能（点赞、礼物、聊天）；后端处理直播流管理、房间管理和实时通信。系统支持RTMP/HLS协议传输直播流，并通过WebSocket实现低延迟互动。文章提供了完整的前后端代码示例和详细的技术实现说明，为开发者构建类似直播系统提供了可行的技术方案。该系统架构可扩展性强，可根据实际需求进一步完善用户认证
SpringBoot+Mysql实现的停车场收费小程序系统+文档
欧阳小白闯天涯
06-05 2644
智能停车小程序是一款基于SpringBoot+MySQL开发的便捷停车解决方案，包含用户端和管理端两大功能模块。用户端提供注册登录、停车场查询、车位预订、在线支付和停车记录查询等功能；管理端支持系统配置、用户管理、停车场/车位管理和停车记录查询等操作。系统采用B/S架构，结合Freemarker模板引擎，具有良好的经济、技术和操作可行性。开发成本低，操作界面友好，能够有效优化城市停车体验。系统已实现核心功能并通过测试验证，具备实际应用价值。
微信小程序日期时间组件的封装
02-16
微信小程序提供了日期时间选择器组件`picker`和日历组件`calendar`，但如果需要自定义样式或者功能，可以考虑封装一个日期时间组件。 以下是一个简单的日期时间组件的封装示例： 1. 在`/components`目录下创建一个`datetime-picker`文件夹，创建`datetime-picker.wxml`、`datetime-picker.wxss`、`datetime-picker.js`和`datetime-picker.json`四个文件。 2. 在`datetime-picker.json`中定义组件的属性： ```json { "component": true, "usingComponents": {}, "properties": { "startDate": { "type": String, "value": "2023-02-15", }, "endDate": { "type": String, "value": "2023-02-20", }, "startTime": { "type": String, "value": "00:00", }, "endTime": { "type": String, "value": "23:59", }, "defaultDate": { "type": String, "value": "", }, "defaultTime": { "type": String, "value": "", }, "format": { "type": String, "value": "datetime", }, "showTime": { "type": Boolean, "value": true, }, "showDate": { "type": Boolean, "value": true, }, "startPlaceholder": { "type": String, "value": "开始时间", }, "endPlaceholder": { "type": String, "value": "结束时间", }, "bind:change": { "type": Function, "value": "", } }, "options": { "styleIsolation": "apply-shared" } } ``` 上述属性中： - `startDate`和`endDate`为日期范围，用于限制可选日期的范围； - `startTime`和`endTime`为时间范围，用于限制可选时间的范围； - `defaultDate`和`defaultTime`为默认值； - `format`为显示格式，支持`datetime`、`date`和`time`三种格式； - `showTime`和`showDate`分别控制是否显示时间和日期选择器； - `startPlaceholder`和`endPlaceholder`为开始时间和结束时间的占位符； - `bind:change`为选择器值变化时的回调函数。 3. 在`datetime-picker.wxml`中定义选择器组件： ```html <view class="datetime-picker"> <view wx:if="{{showDate}}" class="datetime-picker-item"> <picker mode="date" start="{{startDate}}" end="{{endDate}}" value="{{selectedDate}}" bindchange="onDateChange"> <view class="datetime-picker-value"> <text wx:if="{{selectedDate}}">{{selectedDate}}</text> <text wx:else>{{startPlaceholder}}</text> </view> </picker> </view> <view wx:if="{{showTime}}" class="datetime-picker-item"> <picker mode="time" start="{{startTime}}" end="{{endTime}}" value="{{selectedTime}}" bindchange="onTimeChange"> <view class="datetime-picker-value"> <text wx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值