从GitHub上新拉一个项目并在mac系统下运行遇到的种种问题

news2024/11/25 22:56:06

如果项目已经被拉下来,现在我们要启动项目。

step1、需要了解该项目是什么,它的作用是什么,以及它可以解决的问题。阅读项目的介绍、文档和示例,确保对项目有一个基本的认识。

step2、设置开发环境:确保您的开发环境中安装了所需的工具和软件,例如文本编辑器(如Visual Studio Code)、Node.js和npm(或Yarn)包管理器。

一、安装node.js

查看电脑是否安装node

如果没有安装

 继续在终端用cd命令切换到你目前这个项目地址

比如我的jsmind地址存在了yangkexin文件下

cd /Users/yangkexin/jsmind

然后再输入

npm install

同时需要下载扩展

 

卡壳的点在于html代码里引入的三个外部文件地址一直是错的

jsmind.css,jsmind.dreaggable-node.js, jsmind.js,这仨文件光看目录是和html文件1_basic.html同级的。

所以引入时要打两个..

如果都是在同一个文件夹下,则用一个.即可

 

      <link
            type="text/css"
            rel="stylesheet"
            href="../style/jsmind.css"
        />

        <script type="text/javascript" src="../js/jsmind.js"></script>
        <script
            type="text/javascript"
            src="../js/jsmind.draggable-node.js"
        ></script>

 如果运行不报错,但是弹不出来浏览器,

  

 如果你的 launch.json 文件内容是空的,那么你需要添加相应的调试配置到该文件中。以下是一个示例的 launch.json 文件内容,你可以根据你的项目和需要进行修改:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch in Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "firefox",
            "request": "launch",
            "name": "Launch in Firefox",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

 再之后就能弹出浏览器了,但是点击network那三个文件爆红,拿jsmind.css举例子

jsmind.css 的请求 URL 是 file:///Users/yangkexin/jsmind/example/style/jsmind.css,这说明它是通过本地文件系统进行加载的,而不是通过网络请求。

在这种情况下,浏览器可能会限制加载本地文件系统的资源,因为它存在安全风险。你可以尝试将 1_basic.html 文件放在一个支持本地文件加载的服务器上进行访问,而不是直接从文件系统打开。

安装 http-server:打开终端(命令行界面),运行以下命令来全局安装 http-server:

使用管理员权限运行命令:在终端中,尝试以管理员身份运行命令。在 macOS 中,你可以在命令前加上 sudo 前缀,并输入管理员密码来提升权限。例如:

sudo npm install -g http-server

用 npx 运行 http-server:npx 是 npm 5.2.0 版本及更高版本中包含的一个工具,它可以临时安装并运行 npm 包。尝试在终端中运行以下命令:

npx http-server

如果终端显示:added 40 packages in 3s 11 packages are looking for funding run `npm fund` for details

这个消息是 npm 安装依赖包时的常见输出。它表示成功安装了一些包,并提醒你有一些包正在寻求资助。你可以选择运行 npm fund 命令来获取有关这些包资助的详细信息。

在终端中运行 http-server 命令,它应该已经安装完成了。然后,尝试在浏览器中访问 http://localhost:8080 或其他指定的端口号,以加载你的项目。

然后直接访问http://127.0.0.1:8081/1_basic.html

此时已经正常显示

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/621691.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全系统教程+渗透测试+学习路线(自学笔记)

一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面…

使用Smart Install Maker为应用制作安装程序

一. 前言 Unity发布发布PC平台exe的时候&#xff0c;是生成一个Data目录和一个exe文件&#xff0c;如下&#xff1a; 而一般软件发布的时候&#xff0c;是只有一个Setup.exe这样子的安装程序&#xff0c;可以使用Smart Install Maker这个软件来制作这个Setup.exe程序。 二. S…

函数重载与缺省参数

目录 一 缺省参数 缺省参数分半缺省和全缺省。 2&#xff0c;半缺省参数 3&#xff0c;全缺省参数 4.缺省参数的注意事项 二 函数重载 2 .函数重载参数类型不同强调 三 函数名修饰规则 一 缺省参数 1.缺省参数特性(备胎) 缺省参数是指我们定义函数时有给缺省值的参数&#xf…

chatgpt赋能python:Python开发APP的SEO优化指南

Python开发APP的SEO优化指南 Python是广受欢迎的编程语言&#xff0c;它用于开发各种应用程序&#xff0c;从简单的脚本到大型网络应用程序。SEO优化对于任何应用程序的成功都非常重要&#xff0c;这篇文章将介绍一些Python开发APP的SEO实践和技巧。 为什么需要SEO优化&#…

【OpenMMLab AI实战营第二期】目标检测与MMDetection

目标检测 目标检测的基本范式 划窗 使用卷积实现密集预测 锚框 多尺度检测与FPN 单阶段&无锚框检测器选讲 RPN YOLO、SSD Focal Loss与RetinaNet FCOS YOLO系列选讲 什么是目标检测 目标检测&#xff1a;给定一张图片&#xff0c;用矩形框框出所有感兴趣物体同…

Lucene(8):Lucene底层储存结构

1 详细理解lucene存储结构 存储结构 : 索引(Index) &#xff1a; 一个目录一个索引&#xff0c;在Lucene中一个索引是放在一个文件夹中的。 段(Segment) : 一个索引(逻辑索引)由多个段组成, 多个段可以合并, 以减少读取内容时候的磁盘IO。Lucene中的数据写入会先写内存的一个…

公共场所人流数据统计如何实现?解决重识别、漏检等检测难题

https://github.com/PaddlePaddle/paddledetection当前疫情形势严峻&#xff0c;商场、火车站、地铁口等公共场所对人员流量的统计至关重要。“每天进出多少人&#xff1f;” “现在商场中人员数量有多少&#xff1f;”这些关键数据直接影响到相关防疫管控措施。因为人员基数较…

shardingsphere5.x整合springboot分库分表实战

官方文档不同版本配置变更记录&#xff1a;Spring Boot Start 配置 :: ShardingSphere pom.xml配置&#xff1a; <!--shardingsphere分库分表依赖--> <dependency><groupId>org.apache.shardingsphere</groupId><artifactId>shardingsphere-jd…

分布式锁原理与实战一:分布式锁简介

跨JVM的线程安全问题 在单体的应用开发场景中&#xff0c;在多线程的环境下&#xff0c;涉及并发同步的时候&#xff0c;为了保证一个代码块在同一时间 只能由一个线程访问&#xff0c;我们一般可以使用 synchronized 语法和 ReetrantLock 去保证&#xff0c;这实际上是本地锁…

指针--间接寻址运算符

通常&#xff0c;只要指明要访问的变量的内存地址&#xff0c;即可直接访问变量所在的存储单元中的内容。在前面都是直接通过变量名来访问变量的内容。直接按变量名或者变量的地址存取变量的内容的访问方式&#xff0c; 称为 直接寻址&#xff08;Direct Addressing&#xff09…

STM32读取BH1750光照强度数据打印到串口

【1】BH1750是什么&#xff1f; BH1750是一种数字式环境光强度传感器&#xff08;Digital Light Sensor&#xff09;&#xff0c;也称为其他名称&#xff0c;例如GY-302传感器、BH1750FVI传感器等。它的工作原理是通过收集光线照射到传感器上的量来测量环境亮度。 使用I2C&am…

操作系统 第三章 3.2 错题整理

页面引用串长度是什么意思 合法位存在位 不存在即发生故障 区分好页表项和逻辑地址 是不同的 逻辑地址48bit 偏移量12bit 页号36bit 页表项8B 4KB/8B2^9 一个页面能存放2^9个页表项 页号9bit&#xff0c;36/94 虚拟存储器包括内存和磁盘对换区&#xff0c;工作集要频繁用到&…

深度学习:使用UNet做图像语义分割,训练自己制作的数据集,详细教程

语义分割(Semantic Segmentation)是图像处理和机器视觉一个重要分支。与分类任务不同&#xff0c;语义分割需要判断图像每个像素点的类别&#xff0c;进行精确分割。语义分割目前在自动驾驶、自动抠图、医疗影像等领域有着比较广泛的应用。我总结了使用UNet网络做图像语义分割的…

我们不一样-康耐视visionpro和apple vision pro

​ 机器视觉Halcon-不同颜色快速识别 康耐视Visionpro是美国cognex visionpro。 康耐视 VisionPro 是领先的计算机式视觉软件。它主要用于设置和部署视觉应用 - 无论是使用相机还是图像采集卡。借助 VisionPro,用户可执行各种功能,包括几何对象定位和检测、识别、测量和对准…

【Web服务应用】LVS负载均衡集群

LVS负载均衡集群 一、企业级集群含义1.1集群的含义1.2LVS一些专业术语 二、企业集群分类2.1负载均衡集群2.2高可用集群2.3高性能运算集群&#xff08;High Performance Computer Cluster&#xff09; 三、负载均衡的架构3.1负载均衡的结构 四、负载均很集群的工作模式4.1NAT模式…

JDBC连接数据库步骤(入门到进阶全)

目录 一、JDBC是什么&#xff1f; 二&#xff0c;JDBC的本质是什么&#xff1f; 为什么要用面向接口编程&#xff1f; 三、JDBC实现原理 四、使用idea开发JDBC代码配置驱动 ​编辑 五、JDBC编程六步概述 六、JDBC编程实现 1.插入实现 2.删除与更新实现 3 .类加载的方式注…

Jetson AGX Orin安装Anaconda、Cuda、Cudnn、Pytorch、Tensorrt最全教程

文章目录 一&#xff1a;Anaconda安装二&#xff1a;Cuda、Cudnn安装三&#xff1a;Pytorch安装四&#xff1a;Tensorrt安装 一&#xff1a;Anaconda安装 Jetson系列边缘开发板&#xff0c;其架构都是arm64&#xff0c;而不是传统PC的amd64&#xff0c;深度学习的环境配置方法…

chatgpt赋能python:Python对接技术在SEO中的应用

Python对接技术在SEO中的应用 Python作为一种高性能的编程语言&#xff0c;被广泛应用于各种领域&#xff0c;其中也包括了搜索引擎优化&#xff08;SEO&#xff09;领域。Python对接技术&#xff0c;也称为API对接技术&#xff0c;是指通过调用API接口来获取数据、信息或实现…

AI数字人打造之sadtalker让照片开口说话

1 sadtalker介绍 西安交通大学也开源了人工智能SadTalker模型&#xff0c;通过从音频中学习生成3D运动系数&#xff0c;使用全新的3D面部渲染器来生成头部运动&#xff0c;可以实现图片音频就能生成高质量的视频。 论文地址&#xff1a;Learning Realistic 3D Motion Coefficie…

chatgpt赋能python:Python屏蔽语句的重要性

Python屏蔽语句的重要性 Python是一种高级程序设计语言&#xff0c;被认为是开发Web应用程序、数据科学和人工智能的最佳语言之一。在编写Python程序时&#xff0c;每个人都会遇到需要屏蔽语句的情况。在本文中&#xff0c;我们将详细介绍Python屏蔽语句的重要性和用法。 什么…