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

[复制链接]
查看1293 | 回复12 | 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

Less is more.
回复

使用道具 举报

1084504793 | 2024-2-28 18:41:05 | 显示全部楼层
回复

使用道具 举报

楚华 | 2024-2-28 18:48:09 | 显示全部楼层
回复

使用道具 举报

知行合一 | 2024-2-28 19:53:12 | 显示全部楼层
赞一下
回复

使用道具 举报

爱笑 | 2024-2-29 08:39:39 | 显示全部楼层
学习起来!
用心做好保姆工作
回复

使用道具 举报

WT_0213 | 2024-2-29 08:51:31 | 显示全部楼层
回复

使用道具 举报

bzhou830 | 2024-2-29 08:53:30 | 显示全部楼层
学习起来!
选择去发光,而不是被照亮
回复

使用道具 举报

干簧管 | 2024-2-29 08:57:25 | 显示全部楼层
学习起来!
回复

使用道具 举报

noonezero | 2024-2-29 09:03:58 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-2-29 09:04:28 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则