本节核心是带大家直观的感受下我们上节构建的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
环境准备参考
- [前端环境准备Mac版本]https://doc.oinone.top/oio4/9225.html
- [前端环境准备Windows版本]https://doc.oinone.top/oio4/9226.html
启动前端工程
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低代码应用平台体验