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
  • 如果报错了，请修改插件，重新发布，再添加

完结

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