本帖最后由 花花 于 2024-2-28 17:59 编辑
不会写代码,可以开发爱星物联得网页吗?
首先推荐您先了解下开发环境准备,准备好环境,小火车马上出发~ 爱星物联网页开发环境准备:
环境准备好后,来了解下控制面板使用的UI库Vant2。 Vant 是采用Vue框架开发的轻量移动端组件库,含有丰富的组件,可以满足大部分移动端网页开发场景的需求。新手小盆友们可以点击左侧组件菜单找到需要的组件。 需要了解Vue2.x框架的盆友们,可以跳转如下文档:
一、组件引入
可以查看官方文档的“引入组件”部分文档: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart 因本项目已全局导入所有组件,所以后续在页面中使用时,无需再一一单独引入。
二、组件HTML结构 组件的html一般由标签、属性、事件、文本等结构组成,以按钮组件为例:
一个组件的标签是固定的,标签决定了显示的是什么组件。 属性是给标签定义属性,如尺寸、颜色、形状、文字等,但不限于此,可以查看该组件文档API中的Props属性定义列表。 事件是指某些行为作用在标签上时执行的行为,如点击,触摸、滚动等,可以查看该组件文档API中的Events事件定义列表。
三、示例
1、新建页面 第一步:src--views目录下新建文件名为 demo.vue的页面。
第二步:给页面添加基本结构模板代码。复制模板代码,粘贴到demo.vue页面,ctrl+S保存页面。
页面基本结构模板: <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 }, }
此时,在浏览器访问http://localhost:8080/#/demo,可以查看刚新建的demo页面。 2、往页面中添加组件 1)添加图片组件 网页效果:
2)添加单元格
网页效果:
3)添加搭配单元格的开关
网页效果:
4)添加按钮 网页效果: 复制--粘贴--保存,3步搞定网页,你学会了吗? 如果你希望网页更加美观,期待下期,给盆友们分享如何给网页精装修哈~
|