1. Oinone社区首页
  2. 前端

前端环境和启动前端工程

望闲 • • 前端 • 阅读 2489

本节核心是带大家直观的感受下我们上节构建的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 获取方式：
# 1、请见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员;
# 2、参考数式发过去的部署包(部署.zip)中的账号说明：docker-mvn-npm账号.md
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)
望闲的头像望闲数式管理员
0 0
上一篇 2024年5月28日 pm12:20
下一篇 2024年5月29日 pm10:07

相关推荐

  • 函数扩展 前端

    函数扩展

    oinone 平台内置了一些函数, 如果当前函数不满足，那么可以通过扩展的方式添加函数 后端实现 后端实现 import {Expression} from '@kunlun/dependencies' Expression.getInstance().registerFunction(); registerFunction函数的参数如下 /** @param {string} name 函数名字 @param {unknown[]} argTypes 参数类型 @param {Function} handle 回调函数 */ 函数名需要跟后端的保持一致import {Expression} from '@kunlun/dependencies';Expression.getInstance().registerFunction('FUNCTION_NAME', ['number|string'], (input: number | string) => { // todo});第二个参数要注意下，该参数跟回调函数里面的参数要保持一致 Expression.getInstance().registerFunction('FUNCTION_NAME', ['number'], (input: number ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['string'], (input: string ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['array'], (input: any[] ) => { // todo } );

    汤乾华的头像 汤乾华
    2023年11月9日
    2.2K00
  • 主题设置-设置表格全局样式 低无一体

    主题设置-设置表格全局样式

    在启动工程的main.ts通过主题配置表格全局样式 registerThemeItem('demoTheme', { 'table-config': { // 是否带有边框 default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框） border: 'full', // 是否带有斑马纹 stripe: false, // 当鼠标点击行时，是否要高亮当前行 isCurrent: true } as Partial<TableThemeConfig> }); VueOioProvider( { browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, theme: ['demoTheme'], // 其他代码 });

    nation的头像 nation
    2024年8月2日
    1.3K00
  • 界面设计器 扩展字段的查询上下文 前端

    界面设计器 扩展字段的查询上下文

    默认情况下oinone平台对于查询条件，只提供的当前登录用户这一个配置，但是允许开发者扩展 开发者可以在前端代码的main.ts进行扩展 import { SessionContextOptions, ModelFieldType } from '@kunlun/dependencies'; const currentDeptOption = { ttype: ModelFieldType.String, value: '$#{currentDept}', displayName: '当前登录部门', label: '当前登录部门' }; SessionContextOptions.push(currentDeptOption as any); 加上上面的代码，然后再去界面设计器，我们就会发现，多了一个配置

    汤乾华的头像 汤乾华
    2023年11月8日
    1.9K00
  • oio-pagination 分页 组件

    oio-pagination 分页

    API 参数 说明 类型 默认值 版本 currentPage(v-model:currentPage) 当前页数 number – defaultPageSize 默认的每页条数 number 15 disabled 禁用分页 boolean – pageSize 每页条数 number – pageSizeOptions 指定每页可以显示多少条 string[] [’10’, ’15’, ’30’, ’50’, ‘100’, ‘200’] showQuickJumper 是否可以快速跳转至某页 boolean false showSizeChanger 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true boolean – total 数据总数 number 0 事件 事件名称 说明 回调参数 change 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 Function(page, pageSize) noop

    汤乾华的头像 汤乾华
    2023年12月18日
    1.1K00
  • 表单字段API 前端

    表单字段API

    FormFieldWidget 表单字段的基类，包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据，如果当前只有一个视图，那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填，如果当前字段是在详情页，那么是false Boolean – false readonly 当前字段是否只读，如果当前字段是在详情页、搜索，那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验，异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])

    汤乾华的头像 汤乾华
    2023年11月15日
    1.6K00

Leave a Reply

登录后才能评论