使用Vue開發Mendix組件

給你們分享一個使用vue開發Mendix組件的cli: lucky_tools

1、安裝cli

npm install mendix-cli -g

mendix create AppName
複製代碼

2、組件開發

若是你對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
            }
        }),

複製代碼