vue cli plugin 開發之apicloud、h5plus

朱哲發表於2019-03-13
VuePluginAPICloudH5

前言

最近在重新研究apicloud和html5plus開發app，由於之前推薦使用靜態html開發，所以放棄使用。近兩年業餘玩轉了vue，自然而然就需要編寫plugin，方便整合這兩個框架。

問題

翻了翻vue cli的官方文件，發現盡然沒有外部外掛本地測試方法（如果你知道的話，請告訴我，謝謝！）。

開發

  • 首先外掛命名：vue-cli-plugin-[name]
  • 外掛功能確定：命令外掛、服務外掛
    • apicloud和h5plus 是專案模板型別，需要通過vue add .. 使用，因此也是最簡單的外掛，只需要按照標準放入模板檔案即可
  • 編寫：

vue-cli-plugin-apicloud

  • 專案結構
README.md
├── generator         // 生成器
│   ├── index.js      // 生成器執行入口
│   └── templates
│       ├── appconfig.xml
│       ├── build
│       │   └── plugins
│       │       ├── index.js
│       │       └── packapp.plugin.js
│       ├── pages.config.js
│       ├── public
│       │   ├── index.html
│       │   ├── static
│       │   │   └── js
│       │   │       ├── api.js
│       │   │       └── init.js
│       │   └── web_adapter
│       │       ├── adapter.html
│       │       └── script
│       │           ├── adapter.js
│       │           ├── config.js
│       │           ├── hammer.min.js
│       │           ├── myadapter.js
│       │           └── shake.js
│       ├── src
│       │   ├── main.js
│       │   ├── pages
│       │   │   └── hello
│       │   │       ├── App.vue
│       │   │       └── main.js
│       │   └── plugins
│       │       ├── index.js
│       │       ├── init.vue.js
│       │       └── ready.plugin.js
│       └── vue.config.js
├── index.js       // 命令外掛入口
├── logo.png       // vue ui 管理工具顯示logo
└── package.json 


複製程式碼
  • 核心程式碼

最關鍵的generator/index.js

module.exports = (api, opts, rootOptions) => {
    api.extendPackage({
        scripts: {
            "wifi-start": "apicloud wifiStart --port 23456",
            "wifi-stop": "apicloud wifiStop --port 23456",
            "wifi-sync": "cross-env PLATFORM_ENV=none vue-cli-service build && apicloud wifiSync --project dist --updateAll false --port 23456 && apicloud wifiLog --port 23456",
            "build:android": "cross-env PLATFORM_ENV=android vue-cli-service build",
            "build:ios": "cross-env PLATFORM_ENV=ios vue-cli-service build"
        },
        devDependencies: {
            "apicloud-cli": "^0.2.0",
            "cross-env": "^5.2.0",
            "fs-extra": "^7.0.1",
        }
    })
    api.render('./templates')
}
複製程式碼

vue-cli-plugin-h5plus

  • 專案結構
├── README.md
├── generator
│   ├── index.js
│   └── templates
│       ├── appmanifest.json
│       ├── build
│       │   └── plugins
│       │       ├── index.js
│       │       └── packapp.plugin.js
│       ├── pages.config.js
│       ├── public
│       │   ├── helloh5.ttf
│       │   ├── index.html
│       │   └── static
│       │       ├── css
│       │       │   └── common.css
│       │       └── js
│       │           └── init.js
│       ├── src
│       │   ├── main.js
│       │   ├── pages
│       │   │   └── hello
│       │   │       ├── App.vue
│       │   │       └── main.js
│       │   └── plugins
│       │       ├── index.js
│       │       ├── init.vue.js
│       │       └── ready.plugin.js
│       └── vue.config.js
├── index.js
├── logo.png
└── package.json
複製程式碼
  • 核心程式碼

最關鍵的generator/index.js

module.exports = (api, opts, rootOptions) => {
    api.extendPackage({
        scripts: {
            "build:android": "cross-env PLATFORM_ENV=android vue-cli-service build",
            "build:ios": "cross-env PLATFORM_ENV=ios vue-cli-service build"
        },
        devDependencies: {
            "cross-env": "^5.2.0",
            "fs-extra": "^7.0.1",
        }
    })
    api.render('./templates')
}
複製程式碼

釋出

  • 需要npmjs賬號，沒有的自行註冊
  • 進入外掛專案下 npm login (執行前一定要確認當前的倉庫地址是https://registry.npmjs.org/)
  • 釋出：npm publish

測試

  • 建立測試專案：vue create vue-test
  • 新增外掛：vue add apicloud
    • 如果報錯了，請修改外掛，重新發布，再新增

完結

雖然整個流程比較簡單，但是還是有必要記錄下

相關文章