前端环境准备并快速启动

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


视频教程(点此观看)


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日
    84200
  • 快速上手

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

    2024年11月9日
    3.3K00
  • 后端环境准备并快速启动

    注意: 部署/启动后端的过程中如果出现问题,请先在 常见问题 中寻找答案。如仍未解决,请及时在群里咨询。 视频教程(点此观看) 一、环境搭建 1. 需要安装的工具 JDK(1.8_221+) Maven IDEA 注意:以上工具需安装在本地开发电脑上,根据实际情况补充所需工具; 已安装请忽略。 2. 安装 JDK(JDK1.8_221+) 检查是否已安装 JDK 在终端中执行以下命令: java -version 如果安装了,会出现版本号。如果没有安装,请选择以下方式下载 JDK: 官网下载(建议下载 JDK 8, installer):Oracle JDK下载 注意:JDK版本必须高于1.8_221+版本。若无法升级,低于这个版本需要覆盖JCE(覆盖JCE:https://www.cnblogs.com/jinloooong/p/10619353.html) 配置环境变量 打开 Windows 环境变量配置页: 此电脑 => 右键属性 => 系统高级设置 => 环境变量 在用户环境变量中新建变量为JAVA_HOME的项,值为JDK安装之后的路径 变量名:JAVA_HOME 变量值:JDK 安装路径 编辑变量为Path的项添加一个值%JAVA_HOME%\bin 在 PowerShell 或 CMD 中验证,输入java -version,输出类似信息为安装配置成功 3. 安装 Maven 检查是否已安装 Maven 在终端中执行: mvn -v 如果安装了,会出现版本号。如果未安装,请下载 Maven: 推荐安装: Maven 3.6.3 下载 下载后解压。 配置 Maven 私服 之前解压的数式提供的部署包中有两个settings.xml文件: 根据 Maven 版本选择对应的 settings.xml 文件: 3.6.x 及以下的版本使用 settings-3.6.3.xml 3.8.x 及以上的版本使用 settings-3.8.x.xml 具体步骤: 将对应的 settings-3.x.x.xml 复制到 Maven 安装目录的 conf 文件夹里面。 备份已有 settings.xml,将已经存在的settings.xml进行备份(即重命名)。 3.然后将 settings-3.x.x.xml 重命名为 settings.xml。 配置环境变量 在用户环境变量中新建变量为M2_HOME的项,值为Maven安装路径 变量名:M2_HOME 变量值:Maven 安装路径 编辑变量为Path的项添加一个值%M2_HOME%\bin 验证安装 在终端执行: mvn –version 出现下列信息,表示成功了: 如果仍然不成功,请检查环境变量配置。 4. 下载安装 IDEA IntelliJ IDEA Community Edition(社区版)即可,该版本免费且完全够用下载方式: 官网下载:IDEA下载链接 二、IDEA 配置 1. 下载 IDEA 插件 有2种方式: 【推荐】根据不同版本下载不同的idea插件 (联系Oinone获取) 插件下载地址:https://guide.oinone.top/zh-cn/DevManual/Tutorials/setup-guide.html#%E4%B8%89%E3%80%81%E5%90%8E%E7%AB%AF%E9%A2%9D%E5%A4%96%E5%B7%A5%E5%85%B7 1、打开 IDEA,依次点击菜单项 File => Settings => Plugins,找到下载的插件包。 2、找到自己前面下载的插件包: 3、idea插件包输入验证码 Oinone企业版需要激活idea插件,设计器版本可不用激活。 输入数式提供的验证码进行验证, 若激活失败(包括无提示)可数式支持人员询问 2. IDEA 配置(Maven 配置,Annotation 配置) 先打开数式提供的部署包中的后端工程 设置 Maven 的 settings.xml: Maven home path:设置为下载的 Maven 路径。 User settings file:设置为 Maven conf 目录下的 settings.xml。 配置 Java Compiler 为 -parameters。 配置 Annotation Processors,勾选 Enable annotation processing。 编译 Maven 拉取包,执行 mvn install,然后再 reload。 3. 项目启动(修改 yml 文件)…

    2024年10月31日
    1.6K00
  • 前端学习路径

    准备工作 环境准备-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日
    72900
  • 入门学习路径

    前端学习路径 后端学习路径

    2024年10月25日
    1.8K00

Leave a Reply

登录后才能评论