Vue-magnifying-lens NPM

vue-magnifying-lens

amis 自定义组件模板（vue2.0 技术栈）

备注：主要用于充当 amis-widget-cli 中的 vue 技术栈组件模板

目录说明

src: 自定义组件源码；
src/public: 存放静态资源，比如 js、css、img 等；
src/assets: 存放组件静态资源，比如 css、img 等，此处存放的静态资源会经过 webpack 构建；
src/widget: 组件源码；
src/widget/magnifyingLens.vue: 自定义组件代码；
src/index.js: 用于注册一个 amis 渲染器，注册成功后编辑器画布区中才会正常展示自定义组件内容；
src/widget/plugin/magnifyingLens-plugin.jsx: 用于注册一个 amis-editor 插件，注册成功后编辑器左侧组件面板中会展示；
src/preview.js: 用于本地预览自定义组件内容；
amis.config.js: amis-widget-cli 配置文件。

开发说明

安装依赖

$ npm i 或者 yarn

dev: 本地开发模式（带热更新）
dev 开发模式：用于在本地 editor 中调试自定义组件。

$ npm run dev

preview: 组件预览模式（带热更新）
preview 模式：用于预览自定义组件内容。

$ npm run preview

linkDebug: 外链调试（amis-saas 中预览自定义组件）
linkDebug 模式：用于在 amis-saas 中预览和调试自定义组件。

$ npm run linkDebug

build2lib: 构建自定义组件输出产物
build2lib 模式：用于构建发布到 npm 中的文件，默认存放到当前 dist 目录中。

$ npm run build2lib

package.json 添加自定义组件信息，导入组件扩展包时需要
package.json 中添加 amis-widgets 字段，用于放置当前自定义组件信息，有这个 amis-widgets 字段才能被识别为 amis 组件扩展包。

  ...
    "amis-widgets": [
    {
      "name": "vue-magnifying-lens", // 自定义组件名称，必填项
      "framework": "vue", // 技术栈类型，非必填项，默认为 react 技术栈
      "usage": "renderer", // 渲染器类型，非必填项，默认为 renderer
      "type": "vue-magnifying-lens", // 自定义组件类型，必填项，同一应用下不允许有重复的自定义组件类型
      "entry": "/dist/magnifyingLens.umd", // 自定义组件入口文件路径，必填项
      "files": [  // 自定义组件依赖资源文件路径，非必填项
        "/dist/magnifyingLens.css"
      ],
      "editorPlugin": {  // amis-editor自定义插件信息
        "name": "vue-magnifying-lens-plugin", // 自定义插件名称，在编辑器左侧组件面板作为title展示，必填项
        "description": "放大镜", // 自定义插件描述，在编辑器左侧组件面板作为描述信息展示，必填项
        "pluginEntry": "/dist/magnifyingLensPlugin.umd", // 自定义插件的入口文件，必填项
        "tag": [  // 自定义插件的分类，必填项
          "展示"
        ],
        "sort": 100 // 自定义插件的排序，非必填项
      }
    }
  ],
  ...