前端环境准备并快速启动

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


视频教程(点此观看)


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日
    82700
  • 后端部署启动常见问题

    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
  • 前端学习路径

    准备工作 环境准备-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日
    71300
  • 无代码启动常见问题

    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日
    76200
  • 后端学习路径

    准备工作 -1h 后端研发环境安装后端研发环境,需要idea和oinone插件,git和maven 设置指南为学习教程进行的一些准备 后端基础 1.1.1整体介绍 -0.5h– 模块(module)定义– 模块(Module)结构– Oinone版本 1.1.2 新建一个应用 -1.5h为创建一个全新的 Oinone 模块奠定基础。从零开始,仅使用让 Oinone 识别我们模块所需的最少元素。包括: — 新建费用管理模块– 定义Oinone的费用模块– 配置启动工程的YAML文件 1.1.3 模型与基础字段 -3h– 对象关系映射ORM– 模型基础字段 1.1.4 安全简介 -3h配置模型的菜单入口和对应角色的权限(访问权限和数据权限) — 菜单入口– 用户与角色– 访问权限配置 1.1.5 界面实操-3h通过配置字段的一些新属性和UX属性改变页面交互 –字段一些新属性–UX属性 1.1.6 基础视图-3h–表格视图–表单视图–详情视图 1.1.7 模型建关系-8h–多对一关系(many2one)–多对多关系(many2many)–一对多关系(one2many) 1.1.8 字段间联动-5h–关系字段属性:domain–UX的一些新属性,包括:compute、constructFun 1.1.9 准备学习行为-3h–单记录操作–批量操作 1.1.10 约束-1h–SQL约束–校验约束–UI交互约束 1.1.11 追加细节 -3h–内联视图–组件widget–表格排序 1.1.12 继承-2h–函数的重写–模型的继承 1.1.13 模块间相互作用-2h–link模块 1.1.14 产品的个性化开发-4h–模块的upstream属性–函数特性,包括扩展点、拦截器 后端进阶 2.1.1 调试工具-1hOinone 提供的调试工具是一款支持在浏览器页面直接进行 页面调试 与 接口调试 的效率工具。 2.1.2 界面设计器-4h界面设计器提供了直观的可视化界面,允许用户通过拖拽和配置组件的方式来构建应用界面,而无需依赖传统的手写大量代码的方式。这种设计器旨在简化界面开发过程,提高开发效率,同时确保界面的美观和易用性。

    2025年9月1日
    68400

Leave a Reply

登录后才能评论