前言
最近在重新研究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
- 如果報錯了，請修改外掛，重新發布，再新增
完結
雖然整個流程比較簡單，但是還是有必要記錄下