给大家分享一个使用vue开发Mendix组件的cli:
lucky_tools
一、安装cli
npm install mendix-cli -g
mendix create AppName
二、组件开发
如果你对mendix组件开发基础知识还不了解的话,请先移步个人博客-mendix组件开发专题
由于mendix暂时只在Windows中有客户端,所以必须在windows中使用此模板。
项目目录
├─.gitignore
├─README.md ------------------ // README
├─ZH_README.md --------------- // 中文说明文档
├─babel.config.js
├─build ---------------------- // Project Build Result
│ ├─HelloWorld
│ │ ├─HelloWorld.xml
│ │ └─widget
│ │ ├─HelloWorld.js
│ │ └─template
│ │ └─HelloWorld.html
│ ├─package.xml
│ └─widget.mpk
├─mendix --------------------- // Widgets demo
├─package.xml.js ------------- // Build tools
├─src ------------------------ // Project source code
│ ├─HelloMendix.xml ---------- // Mendix widgets config files
│ └─widget
│ ├─App.vue ---------------- // Vue file
│ ├─HelloMendix.js --------- // Contact Vue file and Mendix widget config
│ └─template --------------- // HTML template
│ └─template.html
└─webpack.config.js ---------- // webpack config
使用步骤如下:
1. 安装git和zip
第一步: 建议你使用git命令行来构建组件。git下载地址是 点击这里下载; 第二步: 安装 zip and bzip2 点击去这里下载zip和bzip2
我下载的是“zip-3.0-bin.zip” 和 “zip.exe” , “bzip2-1.0.5-bin.zip” 和 “bzip2.dll” /bin/.exe 记住:将zip.exe文件和bzip2.dll文件拷贝到git安装目录下
2. 如何使用
npm install
npm run build
如果你想打生产包的组件的话,请修改webpack.config.js的文件
mode: "development", // Change the mode do "production" before you go live! Don't forget!
plugins: [
// Change the plugin do "production" before you go live! Don't forget!
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"' // change to "production" when publishing your Mendix widget
}
}),