本节核心是带大家直观的感受下我们上节构建的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环境准备参考
- [前端环境准备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 dev4、若安装失败
- 检查本地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低代码应用平台体验
