前端环境和启动前端工程

本节核心是带大家直观的感受下我们上节构建的demo模块,并搭建前端环境为后续学习打下基础

环境准备

配置NPM

npm config set registry http://nexus.shushi.pro/repository/kunlun/

登录NPM源账号

npm login --registry "http://nexus.shushi.pro/repository/kunlun/"
# username、password、email 请见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员
npm info underscore

环境准备参考

启动前端工程

1、下载前端工程本地运行 [ss-front-modules.zip]ss-front-modules

2、解压下载后的工程,可以查看README.MD快速上手指南; 找到vue.config.js文件,修改devServer.proxy.pamirs.target为后端服务的地址和端口

const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default;
const Dotenv = require('dotenv-webpack');
module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.widget$/,
          loader: '@kunlun/widget-loader'
        }
      ]
    },
    plugins: [new WidgetLoaderPlugin(), new Dotenv()],
    resolveLoader: {
      alias: {
        '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader')
      }
    }
  },
  devServer: {
    port: 8081,
    disableHostCheck: true,
    progress: false,
    proxy: {
      pamirs: {
        // 支持跨域
        changeOrigin: true,
       // 改成本地后端对应的IP和端口; 本地后端未启动的情况也可改成无代码后端IP和端口
        target: 'http://192.168.0.121:8190'
      }
    }
  }
};

3、 安装依赖和运行
在工程目录ss-front-modules下执行

# 安装依赖
npm i
# 运行
npm run dev

4、若安装失败

  • 检查本地node、npm、vue对应的版本
    前端环境和启动前端工程

5、 如果启动报错

  • 清除node_modules后重新 npm i
  • mac清除命令:npm run cleanOs
  • windows清除命令: npm run clean

注:要用localhost域名访问,.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致,老版本Chrome会有问题,修改可以请参https://www.cnblogs.com/willingtolove/p/12350429.html。或者下载新版本Chrome

  • 进入前端工程ss-front-modules文件目录下,执行 npm run dev,最后出现下图就代表启动成功
    前端环境和启动前端工程

6、使用 http://127.0.0.1:8081/login 进行访问,并用admin账号登陆,默认密码为admin

前端环境和启动前端工程

5、点击左上角进行应用切换,会进入App Finder页面,可以看到所有已经安装的应用,可以对照boot的yml配置文件看。

前端环境和启动前端工程
前端环境和启动前端工程

在后续的学习过程中我们会不断完善示例中的模块。至此恭喜您,前端工程已经启动完成。

示例工程分层说明

# ss-boot
不做业务研发,只做包的组装和依赖

# ss-oinone
与Oinone结合层,这个工程结构可以把数式Oinone的改造收口,也是业务工程依赖的核心层

# ss-admin-widget
与界面设计器无代码的结合工程,在这个工程结构里可以把组件放在无代码平台上使用

# ss-project
模拟的项目工程,做某个项目的个性化开发

Oinone社区 作者:望闲原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/12478.html

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

(0)
望闲的头像望闲数式管理员
上一篇 2024年5月28日 下午12:20
下一篇 2024年5月29日 下午10:39

相关推荐

  • 如何通过 Oineone 平台自定义视图

    在 Oineone 平台上,自定义视图允许用户替换默认提供的页面布局,以使用自定义页面。本文将指导您如何利用 Oineone 提供的 API 来实现这一点。 默认视图介绍 Oineone 平台提供了多种默认视图,包括: 表单视图 表格视图 详情视图 画廊视图 树视图 每种视图都有其标准的 layout。自定义视图实际上是替换这些默认 layout 的过程。 …

    2024年4月3日
    11100
  • 自定义组件之自动渲染(组件插槽的使用)(v4)

    阅读之前 你应该: 了解DSL相关内容。母版-布局-DSL 渲染基础(v4) 了解SPI机制相关内容。组件SPI机制(v4.3.0) 自定义组件简介 前面我们简单介绍过一个简单的自定义组件该如何被定义,并应用于页面中。这篇文章将对自定义组件进行详细介绍。 自定义一个带有具名插槽的容器组件(一般用于Object数据类型的视图中) 使用BasePackWidge…

    2023年11月1日
    6800
  • 动作API

    ActionWidget 动作组件的基类,包含了动作组件的通用属性和方法 示例 class MyActionWidget extends ActionWidget { } 动作属性 属性名 说明 类型 可选值 默认值 label 动作的名称 String – 当前动作的displayName action 当前动作的元数据 RuntimeAction – m…

    2024年3月8日
    33300
  • OioNotification 通知提醒框

    全局展示通知提醒信息。 何时使用 在系统四个角显示通知提醒信息。经常用于以下情况: 较为复杂的通知内容。 带有交互的通知,给出用户下一步的行动点。 系统主动推送。 API OioNotification.success(title,message, config) OioNotification.error(title,message, config) Oi…

    2023年12月18日
    10100
  • oio-modal 对话框

    API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁…

    2023年12月18日
    6400

发表回复

登录后才能评论