从开发到发布一款基于Vue2x的图片预览插件

ivydom 发布于2019-08-22 17:13 / 2185人阅读

摘要：项目地址先来看下关于开发插件的几种方式具体请移步官网官网添加全局方法或属性逻辑添加全局资源逻辑注入组件逻辑添加实例方法逻辑我采用第一种方式来编写这个插件第一步创建项目你的项目名称具体操作不在赘述开始插件开发，编写这段代码很重要编

项目地址: vue-picture-viewer

先来看下Demo

LiveDemo

关于开发Vue插件的几种方式（具体请移步官网）Vue官网

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

我采用第一种方式来编写这个插件

1.第一步创建项目

vue init webpack-simple youProjectName(你的项目名称)具体操作不在赘述

2.开始插件开发，编写index.js

import vuePictureViewer from "./vue-picture-viewer"

const pictureviewer = {
  install (Vue, options) {
    Vue.component(vuePictureViewer.name, vuePictureViewer)
  }
}

if (typeof window !== "undefined" && window.Vue) { // 这段代码很重要
  window.Vue.use(pictureviewer)
}

export default pictureviewer

3.编写vue-picture-viewer.vue也挺简单(具体可以去看源码)

4.如何使用（main.js）

import vuePictureViewer from "./lib/index.js"
Vue.use(vuePictureViewer)

App.vue

5.打包前的配置webpack.config.js（很重要！！！）

module.exports = {
  entry: "./src/lib/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    // filename: "build.js",
    filename: "vue-picture-viewer.js",
    library: "pictureViewer",
    libraryTarget: "umd",
    umdNamedDefine: true
  },

6.打包成功，配置package.json

"license": "MIT", // 许可证
  "private": false, // 默认是true 私人的 需要改为false, 不然发布不成功！
  "main": "dist/vue-picture-viewer.js", 这个超级重要 决定了你 import xxx from “vue-picture-viewer” 它默认就会去找 dist下的vue-picture-viewer 文件
  "repository": {
    "type": "git",
    "url": "https://github.com/sangcz/vue-picture-viewer" // github项目地址
  },

7.一切Ok准备发布！

8.首先注册好npm后添加用户

npm adduser 
Username: your name 
Password: your password 
Email: yourmail

// 查看一下登录的是不是你自己
npm whoami

// 发布
npm publish

// 这里我遇到一个问题，发布失败了！
什么原因呢？

9.解决了上面的问题，发布成功了！开心

混合云专线服务开发一款小程序基于java的java开发基于javascript的webgis开发小程序的开发和发布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94973.html

当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0