vue cli plugin 開發之apicloud、h5plus

前言

最近在從新研究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
  • 防止重名：插件命名前去www.npmjs.com/package/pac…檢索下
  • 怎麼發佈@開頭的：修改"name":"@xxx/project-name" 便可

測試

• 建立測試項目：vue create vue-test
• 添加插件：vue add apicloud
  • 若是報錯了，請修改插件，從新發布，再添加

完結

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