发帖
14 1 0

不会写代码?复制-粘贴搞定网页开发

花花
金牌会员

25

主题

17

回帖

2380

积分

金牌会员

积分
2380
爱星物联IoT云平台 1866 14 2024-2-28 17:59:45
本帖最后由 花花 于 2024-2-28 17:59 编辑

不会写代码,可以开发爱星物联得网页吗?
图片1.png

首先推荐您先了解下开发环境准备,准备好环境,小火车马上出发~
爱星物联网页开发环境准备:

环境准备好后,来了解下控制面板使用的UI库Vant2。
图片2.png
Vant 是采用Vue框架开发的轻量移动端组件库,含有丰富的组件,可以满足大部分移动端网页开发场景的需求。新手小盆友们可以点击左侧组件菜单找到需要的组件。
需要了解Vue2.x框架的盆友们,可以跳转如下文档:

一、组件引入

可以查看官方文档的“引入组件”部分文档:
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
因本项目已全局导入所有组件,所以后续在页面中使用时,无需再一一单独引入。
图片3.png

二、组件HTML结构
组件的html一般由标签、属性、事件、文本等结构组成,以按钮组件为例:
图片4.png

一个组件的标签是固定的,标签决定了显示的是什么组件。
属性是给标签定义属性,如尺寸、颜色、形状、文字等,但不限于此,可以查看该组件文档API中的Props属性定义列表。
事件是指某些行为作用在标签上时执行的行为,如点击,触摸、滚动等,可以查看该组件文档API中的Events事件定义列表。
图片5.png
图片6.png

三、示例

1、新建页面
第一步:src--views目录下新建文件名为 demo.vue的页面。
图片7.png
图片8.png

第二步:给页面添加基本结构模板代码。复制模板代码,粘贴到demo.vue页面,ctrl+S保存页面。

图片9.png

页面基本结构模板:
<template>
    <section>
    </section>
</template>
<script>
    export default {
        name:"Demo",
        data() {
            return {}
        },
        methods: {},
    }
</script>
<style lang="less" scoped>
</style>


第三步:给页面创建路由地址。

打开目录src--router下的views.js文件,添加一条demo页面的路由,保存。

{
    path: "/demo",
    name: "Demo",
    component: () => import("@/views/demo"),
    meta: { title: "示范页", keepAlive: true },
}

图片10.png

此时,在浏览器访问http://localhost:8080/#/demo,可以查看刚新建的demo页面。
图片11.png
图片12.png
2、往页面中添加组件
1)添加图片组件
图片13.png
图片14.png
网页效果:
图片15.png

2)添加单元格
图片16.png

图片17.png
网页效果:
图片18.png

3)添加搭配单元格的开关

图片19.png
图片20.png

网页效果:
图片21.png

4)添加按钮
图片22.png
图片23.png
网页效果:
图片24.png
复制--粘贴--保存,3步搞定网页,你学会了吗?
图片25.png
如果你希望网页更加美观,期待下期,给盆友们分享如何给网页精装修哈~
图片26.png

──── 1人觉得很赞 ────

使用道具 举报

2024-2-28 18:41:05
2024-2-28 18:48:09
2024-2-28 19:53:12
赞一下
2024-2-29 08:39:39
学习起来!
2024-2-29 08:51:31
2024-2-29 08:53:30
学习起来!
2024-2-29 08:57:25
学习起来!
2024-2-29 09:03:58
2024-2-29 09:04:28
您需要登录后才可以回帖 立即登录
高级模式
12下一页
统计信息
  • 会员数: 28200 个
  • 话题数: 40097 篇