前端环境准备并快速启动

注意: 部署/启动前端的过程中如果出现问题,请先在 常见问题 中寻找答案。如仍未解决,请及时在群里咨询。


视频教程(点此观看)


1. 需要安装的工具

  • Node.js (v20.16.0)
  • VSCode

注意:以上工具需安装在本地开发电脑上,根据实际情况补充所需工具。


2. 安装 Node.js

  • 检查是否已安装

    在终端中输入以下命令:

    node -v

    如果安装了,会出现版本号。建议使用 20.16.0 版本。

  • 下载 Node.js

    如果未安装,请选择以下任一方式下载:

    • 官网下载Node.js v20.16.0
      下载好了之后,双击,开始安装:
      前端环境准备并快速启动
      一直点击 Next 直到 Install 完成安装。
      前端环境准备并快速启动
  • 验证安装

    再次运行以下命令检查是否安装成功:

    node -v
    npm -v

    出现版本号表示安装成功:
    前端环境准备并快速启动


3. 安装 VSCode

如果已安装,请忽略此步骤。

  • 下载 VSCode

    选择以下任一方式下载:

    安装完成后,打开 VSCode 并加载前端工程 SS_FRONT_MODULES

  • 配置项目

    ss-boot 子工程中,打开 vue.config.js 文件,将 target 地址修改为后端开发地址:
    前端环境准备并快速启动


4. 安装 Vue CLI

  • 安装

    在 VSCode 的终端中输入以下命令安装 Vue CLI (v5.0.8):

    npm install -g @vue/cli@5.0.8
  • 验证安装

    检查安装是否成功:

    vue --version

    安装成功将显示版本号。


5. 配置 npm 源

  • 设置 npm 源为内部源

    npm config set registry http://nexus.shushi.pro/repository/kunlun/
  • 登录 NPM 源

    注意:用户名和密码在部署包的 xxx账号.md 文件中。

    npm login --registry "http://nexus.shushi.pro/repository/kunlun/"
    
    npm info underscore

    成功登录后,将出现相关信息:
    前端环境准备并快速启动
    前端环境准备并快速启动


6. 安装 pnpm

  • 验证安装

    在终端中输入以下命令安装 pnpm:

    npm install -g pnpm
  • 验证安装

    检查安装是否成功:

    pnpm -v
  • 清理缓存

    pnpm run clean
  • 安装依赖包

    pnpm i

    注意:此过程可能较慢。


7. 启动项目

启动开发环境:

pnpm run dev

启动成功后,您可以直接访问项目。
前端环境准备并快速启动

Oinone社区 作者:红莲原创文章,如若转载,请注明出处:https://doc.oinone.top/xin-ren-ru-men/18827.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
红莲的头像红莲数式员工
上一篇 2024年10月31日 am10:42
下一篇 2024年10月31日 pm5:30

相关推荐

  • 环境准备须知

    本地开发:本地使用idea开发,编写业务代码;服务器:用来部署无代码设计器的,安装docker、mysql等;本教程模拟的 本地是windows、 服务器是Centos的操作系统 注意事项条件 需要准备一台4核16G的Linux服务器 操作系统推荐CentOS 7.9 64位(其他兼容操作系统也可以) 1、互通性 ● 本地开发ip   能否调通   服务器ip   在本地执行命令:ping 192.168.0.121(替换成服务器ip) ● 部署docker的宿主机ip 能否调通 本地开发ip   进入服务器执行命令:ping 192.168.0.60(替换成自己的本地ip) 注意:推荐双向能互通,如果不通的话从无代码端访问本地数据会出现调用服务错误。 2、确定服务器系统架构 查看当前系统架构: 使用 arch(推荐使用) 或者uname -a 命令 x86_64:表示支持 AMD64 架构。 aarch64:表示支持 ARM64 架构 Oinone所有镜像均使用docker manifest支持amd64和arm64架构!(如果有其他架构请先联系数式人员确定能否使用) 注意!以上条件必须先明确好,再进入后面的部署。

    2024年10月30日
    83800
  • 无代码启动常见问题

    1、执行yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo出现问题: 报错: Could not fetch/save url https://download.docker.com/linux/centos/docker-ce.repo to file /etc/yum.repos.d/docker-ce.repo: [Errno 14] curl#35 – "TCP connection reset by peer 解决方案: # 把docker-ce镜像源设置到阿里云 yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 2、如果重新运行startup.sh失败,可能是docker前面已经启过了还在运行。 解决方案: docker stop designer-allinone docker rm designer-allinone sh startup.sh 3、启动无代码失败 报错: 依赖包版本不匹配 pamirs-business-api已安装版本:[5.1.24],启动中包含的版本:[5.1.12] pamirs-data-audit-api已安装版本:[5.1.24],启动中包含的版本:[5.1.12] pamirs-sys-setting-core已安装版本:[5.1.24],启动中包含的版本:[5.1.12] ······ 解决方案:修改 startup.sh 中的版本修改docker pull 命令中的版本(注意:具体版本号查看https://doc.oinone.top/xin-ren-ru-men/18758.html中) 4、执行vi startup.sh出错,可能是没有修改这个文件的权限,执行chmod 777 startup.sh即可授权

    2024年11月8日
    78000
  • 前端学习路径

    准备工作 环境准备-1h安装基础环境,需要Node和PNPM如果已经安装检查对应版本,体验阶段建议版本保持一致 克隆一个空工程-0.5h全新工程 注意事项-0.5h静态资源解压,如果还没有对应的后端服务。可以使用:https://demo.oinone.top(Oinone演示环境),账号密码:admin/admin 前端基础 1.1.1了解组件-3h– 组件如何开发– 组件如何复用– 组件如何嵌套 1.1.2 更近一步-5h– 构建更复杂的工作台– 如何发起后端请求– 构建一个通用的图表组件 1.1.3 深入了解概念-5h– 通用概念、名词解释– 页面渲染原理– 组件执行原理 1.1.4业务实战-实现通用的甘特图组件-8h– 怎么与第三方结合– 如何在开源组件上接入Oinone, 并复用 1.1.5 业务实战-实现通用的画廊组件-6h–如何更近一步复用–基础学习结束 前端进阶 2.1.1代码和无代码如何结合-4h– 了解无代码如何使用和基础概念 2.1.2使用无代码搭建增删改查-8h– 了解无代码如何使用和基础概念 最后一步 当您实现玩基础和进阶的所有的效果,Oinone的整体使用您已经大致掌握了,接下来您可以找一个当前业务的场景来实现它把!

    2025年9月1日
    72700
  • 快速上手

    Oinone是一个企业级产品化引擎,专注于为企业在项目型、行业产品和标品的三个发展阶段提供极具成本效益的解决方案,帮助企业高效应对核心技术挑战,打造自有得研发平台。 建议大家以下方流程深度体验Oinone的各种能力、了解熟悉Oinone的设计理念、解题思路;同时我们也在微信群提供1V1的解答;有解决不了的问题随时联系对应的支持人员; 部署所需资料包 提示:安装启动具体操作查看“快速启动”。其它版本也可,建议使用以上版本。 入门学习路径 这是整个学习的过程:注意:此图的每一步都可在下面的目录中找到,大家跟随操作即可(有文档有视频)! 快速启动 环境准备须知(部署前必看) * 无代码启动 常见问题 * 无代码启动常见问题 后端启动常见问题 入门培训视频 整体概念(点击此处观看) 视频简介: 平台整体介绍、核心理念、研发方式、要解决的问题 观看对象: 建议都看 后端(点击此处观看) 视频简介: 如何开始、与原有开发方式有什么差异?元数据是什么?前后端如何协作?0-1开发一个新场景,解答疑惑 观看对象: 后端,对Java有基础的了解 前端(点击此处观看) 视频简介: 前端要做什么?怎么做到不用联调?写的代码怎么沉淀、复用?与后端如何协作?每种场景都有一个示例,有最基本的概念讲解 观看对象: 前端,对Vue有基础的了解 无代码(点击此处观看) 视频简介: 无代码有什么定位?在开发、测试、生产阶段能做什么?对研发有什么帮助?无代码基础使用入门讲解 观看对象: 建议都看 按教程还原业务场景(文档) 后端 前端 按教程还原业务场景(视频) 后端 前端

    2024年11月9日
    3.3K00
  • 后端部署启动常见问题

    1、Windows启动如出现以下报错,直接点击 JAR manifest 即可 2、出现“未经许可授权模块无法访问" 报错: 原因: 有可能是因为jdk版本低于1.8_221版本。 解决方式: (1) 可以重装jdk,选择安装包里面提供的 (2) 低于1.8_221版本的需要覆盖掉jce, 原因:https://www.cnblogs.com/jinloooong/p/10619353.htmljce可以在这里下载, https://doc.oinone.top/install/backendinstall/13760.html 如果以上解决方式仍无效,请联系数式员工。 3、出现“境信息检查不通过,请根据以上提示信息进行修改" 报错: 原因: 新版本加了环境检验,同base库同Redis下中间件和版本不一致导致的校验失败 查看具体原因: 在看到报错信息后,日志向前翻(即看更早的日志)会看到错误的环境信息 ,有打印出具体的环境不一致的信息 解决方式: 需要保持同环境下的版本、中间件配置等一致 4、出现“创建数据库错误" 报错: 原因: 可能是因为开了防火墙,导致连接不上数据库 解决方式: 关闭防火墙:systemctl stop firewalld 或者放开对应的端口 5、出现“公共环境开启了元数据保护模式" Caused by: java.lang.UnsupportedOperationException: 公共环境开启了元数据保护模式,本地开发环境需配置 [pamirs.distribution.session.ownSign] at pro.shushi.pamirs.boot.standard.service.MetadataProtectedChecker.unsupportedLocalOperation(MetadataProtectedChecker.java:70) at pro.shushi.pamirs.boot.standard.service.MetadataProtectedChecker.process(MetadataProtectedChecker.java:63) at pro.shushi.pamirs.boot.common.spi.service.boot.DefaultBootModuleLifecycleBegin.run(DefaultBootModuleLifecycleBegin.java:35) at pro.shushi.pamirs.boot.common.process.PamirsBootMainProcessor.lambda$installOrLoad$2(PamirsBootMainProcessor.java:89) at pro.shushi.pamirs.boot.common.spi.api.boot.BootModuleLifecycleAroundApi.run(BootModuleLifecycleAroundApi.java:30) at pro.shushi.pamirs.boot.common.process.PamirsBootMainProcessor.installOrLoad(PamirsBootMainProcessor.java:66) at pro.shushi.pamirs.boot.common.initial.PamirsBootMainInitial.installOrLoad(PamirsBootMainInitial.java:119) at java.util.concurrent.CompletableFuture$AsyncRun.run$$$capture(CompletableFuture.java:1640) at java.util.concurrent.CompletableFuture$AsyncRun.run(CompletableFuture.java) at java.util.concurrent.CompletableFuture$AsyncRun.exec(CompletableFuture.java:1632) at java.util.concurrent.ForkJoinTask.doExec$$$capture(ForkJoinTask.java:289) at java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java) at java.util.concurrent.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1056) at java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1692) at java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:175) 原因: 共环境下元数据保护机制正常的保护提示,防止元数据被意外修改 解决方式: (1) 测试环境启动或体验阶段,可在启动配置增加【程序实参 (Program arguments)】-PmetaProtected=pamirs 后再进行启动。 (2) 多人协调场景参考 https://doc.oinone.top/oinone-faq/18544.html

    2024年10月31日
    1.1K00

Leave a Reply

登录后才能评论