vue cli html5 plus,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

怎么发布@开头的：修改"name":"@xxx/project-name" 即可

测试

创建测试项目：vue create vue-test

添加插件：vue add apicloud

如果报错了，请修改插件，重新发布，再添加

完结

虽然整个流程比较简单，但是还是有必要记录下