vue封装插件并发布到npm上

vue封装插件并发布到npm上

项目初始化

首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的
vue封装插件并发布到npm上_第1张图片
然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中
功能写好后,我们要写index.js来封装组件

import VueComment from './VueComment.vue'
const comment = {
  install: function(Vue) {
    Vue.component(VueComment.name, VueComment)
  }
}
// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) { 
    window.Vue.use(comment) 
}
// 导出模块
export default comment

我们在webpack配置的入口文件就是index.js,install是挂载组件的方法,有了它我们就可以在外部use一个插件了。
接下来就是修改配置文件,为打包发布做准备

修改配置项

修改package.json

{
  "name": "mini-sliders",
  "description": "vue轮播图组件",
  "version": "1.0.1",
  "author": "Echo-lu ",
  // 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径
  "main":"dist/vue-slider.js",
  //开源协议
  "license": "MIT",
  // 因为组件包是公用的,所以private为false
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/echo-lu/mini-sliders.git"
 },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
// 指定关键字
 "keywords": [
 "vue",
 "slider"
 ],
  // 项目官网的url
 "homepage": "https://github.com/echo-lu/mini-sliders/blob/master/README.md",
  "devDependencies": {
    ...
  }
}



修改webpack.config.js

由于不是所有使用组件的人都是通过 npm 安装使用 import 引入组件的,还有很多人是通过

你可能感兴趣的:(vue,vue学习)