爱星物联网页开发环境准备

[复制链接]
查看2017 | 回复25 | 2024-2-27 17:45:04 | 显示全部楼层 |阅读模式
本帖最后由 花花 于 2024-2-29 09:01 编辑

想要自行开发爱星物联的网页,对着代码一头雾水?工欲善其事,必先利其器。开发前先来瞅瞅如何配置环境。

一、工具安装
先准备好装备,根据使用的电脑系统选择对应的安装包下载。


1、Git工具安装

拉取、管理代码都靠它啦~
下载地址:https://git-scm.com/download


图片1.png

2、VSCode代码编辑器安装
VSCode拥有强大的代码编辑功能,编译、构建也是一气呵成。
下载地址:https://code.visualstudio.com/Download


图片2.png
安装中文包插件,方便界面操作。英文优秀者也可略过。。



图片3.png

3、Node.js安装
爱星物联前端项目采用的框架代码是基于node运行的,所以这个是必备。
下载地址:https://nodejs.org/en/download


图片4.png

二、拉取代码

以APP控制面板的代码为例:
打开放置代码的目录-->右击鼠标-->选中Git Bash Here-->打开git界面-->输入命令行克隆代码-->enter
命令行:git clone [项目仓库地址]


图片5.png
图片6.png

如果不想使用git工具,也可以访问项目地址:
https://github.com/ubases/app-device-panel/tree/maste
直接下载代码的压缩包解压。

三、安装依赖/启动项目



1、用VSCode打开项目目录
图片7.png

2、安装依赖
第一步:打开控制台:
方法一:点击终端-->点击新建终端-->底部会弹出一个命令窗口
图片8.png
方法二:使用快捷键ctrl+shift+M,底部窗口弹出,选择终端

第二步:安装依赖
前提:已在电脑本地安装了Node.js
在终端输入命令:
  1. npm install
复制代码

安装完成后,目录会多出一个node_modules目录。
图片9.png

3、启动项目

在终端输入命令:
  1. npm run serve
复制代码
启动成功后,就可以在浏览器访问本地页面啦~

图片10.png
图片11.png

针对移动端网页可以在浏览器点击f12,然后选中手机模式图标,切换成手机模式浏览网页,视觉上更友好。


图片12.png


Less is more.
回复

使用道具 举报

爱笑 | 2024-2-27 17:54:41 | 显示全部楼层
不错不错
用心做好保姆工作
回复

使用道具 举报

楚华 | 2024-2-27 19:11:24 | 显示全部楼层
回复

使用道具 举报

wukong50 | 2024-2-27 21:48:04 | 显示全部楼层
回复

使用道具 举报

7788 | 2024-2-27 21:50:39 | 显示全部楼层
回复

使用道具 举报

bzhou830 | 2024-2-28 08:33:38 | 显示全部楼层
选择去发光,而不是被照亮
回复

使用道具 举报

1084504793 | 2024-2-28 08:38:44 | 显示全部楼层
回复

使用道具 举报

noonezero | 2024-2-28 08:42:14 | 显示全部楼层
回复

使用道具 举报

timo | 2024-2-28 08:59:45 | 显示全部楼层
回复

使用道具 举报

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

使用道具 举报

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

本版积分规则