使用Vue开发Mendix组件

时间 2019-11-08

标签使用 vue 开发 mendix 组件繁體版

原文原文链接

给你们分享一个使用vue开发Mendix组件的cli: lucky_toolshtml

1、安装cli

npm install mendix-cli -g

mendix create AppName
复制代码

2、组件开发

若是你对mendix组件开发基础知识还不了解的话，请先移步我的博客-mendix组件开发专题vue

因为mendix暂时只在Windows中有客户端，因此必须在windows中使用此模板。webpack

项目目录git

├─.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
复制代码

使用步骤以下：github

1. 安装git和zip

第一步: 建议你使用git命令行来构建组件。git下载地址是点击这里下载; 第二步: 安装 zip and bzip2 点击去这里下载zip和bzip2web

我下载的是“zip-3.0-bin.zip” 和 “zip.exe” ， “bzip2-1.0.5-bin.zip” 和 “bzip2.dll” /bin/.exe 记住：将zip.exe文件和bzip2.dll文件拷贝到git安装目录下npm

2. 如何使用

npm install
npm run build
复制代码

若是你想打生产包的组件的话，请修改webpack.config.js的文件windows

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
            }
        }),

复制代码