# 前端开发

ModStart框架使用了 jQuery 等基础前端技术,页面不限于使用 Vue、React 作为前端技术集成。

# 前端代码位置

  • ModStart基础前端代码位于 vendor/modstart/modstart/resources/asset/
  • 不同模块的前端代码位于 module/Xxx/resources/asset/

前端代码需要使用 nodejs 构建,需要预先了解前端使用 webpack, gulp 打包的基础知识。

# 前端代码如何编译

# Windows

  1. 安装 nodejs

进入官网 http://nodejs.cn/ (opens new window) ,下载对应的nodejs安装包下载,完成安装。

推荐安装 node 14 以上版本

  1. 打开 nodejs 命令窗口

安装完成后,点击windows启动,打开 Node.js command prompt 命令窗口

  1. 安装 cnpm 和打包依赖

安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题,可根据自己的情况自行选择

安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
1

安装webpack和gulp依赖

cnpm install -g webpack-cli@4 webpack@4 gulp@4
1
  1. 编译前端代码

编译ModStart代码

通常情况下系统的前端代码无需修改

# 进入到系统静态资源根目录
cd c:\xxx\vendor\modstart\modstart\resources\asset\
# 安装依赖
cnpm install
# 打包前端CSS、图片等静态资源
gulp
# 调试模式:打包前端JS单页静态资源
webpack --env dev
# 生产模式:打包前端JS单页静态资源
webpack
# 开发模式:打包前端JS单页静态资源,边开发边刷新
webpack --env dev --watch
1
2
3
4
5
6
7
8
9
10
11
12

编译模块代码

编译模块前端代码前,请确保ModStart的静态资源已经安装过依赖(cnpm install)

# 进入到模块静态资源根目录
cd c:\xxx\module\Xxx\resources\asset\
# 安装依赖
cnpm install
# 打包前端CSS、图片等静态资源
gulp
# 调试模式:打包前端JS单页静态资源
webpack --env dev
# 生产模式:打包前端JS单页静态资源
webpack
# 开发模式:打包前端JS单页静态资源,边开发边刷新
webpack --env dev --watch
1
2
3
4
5
6
7
8
9
10
11
12

# OSX / Linux

  1. 安装 nodejs

进入官网 http://nodejs.cn/ (opens new window) ,下载对应的nodejs安装包下载,完成安装。

推荐安装 node 14 以上版本

  1. 安装 cnpm 和打包依赖

安装 cnpm 主要是为了解决国内访问 npm 速度太慢的问题,可根据自己的情况自行选择

安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
1

安装webpack和gulp依赖

cnpm install -g webpack-cli@4 webpack@4 gulp@4
1
  1. 编译前端代码

编译ModStart代码

通常情况下系统的前端代码无需修改

# 进入到系统静态资源根目录
cd vendor/modstart/modstart/resources/asset/
# 安装依赖
cnpm install
# 打包前端CSS、图片等静态资源
gulp
# 调试模式:打包前端JS单页静态资源
webpack --env dev
# 生产模式:打包前端JS单页静态资源
webpack
# 开发模式:打包前端JS单页静态资源,边开发边刷新
webpack --env dev --watch
1
2
3
4
5
6
7
8
9
10
11
12

编译模块代码

编译模块前端代码前,请确保ModStart的静态资源已经安装过依赖(cnpm install)

# 进入到模块静态资源根目录
cd module/Xxx/resources/asset
# 安装依赖
cnpm install
# 打包前端CSS、图片等静态资源
gulp
# 调试模式:打包前端JS单页静态资源
webpack --env dev
# 生产模式:打包前端JS单页静态资源
webpack
# 开发模式:打包前端JS单页静态资源,边开发边刷新
webpack --env dev --watch
1
2
3
4
5
6
7
8
9
10
11
12

# 前端开发组件

# 弹窗功能

通过增加 data-dialog-request 可以快速创建一个弹窗( iframe 模式 )。

<a href="javascript:;" data-dialog-request="/path/to/dialog">弹窗</a>
1

在弹窗页面通过调用 parent.layer.closeAll() 可以关闭操作

# 实例参考

Vue单页应用集成:

Vue普通方式集成:

Last Updated: 23 days ago