vue 组件封装并发布npm包详解

封装组件

我这里选择的是表情的一个组件例子，npm 包名称 aimee-plugins-emoji

image.png

首先创建组件项目

通过Vue 脚手架创建简易webpage项目

vue init webpack-simple aimee-plugins-emoji

生成后的目录如下

image.png

安装依赖 并 运行

cd webpack-simple aimee-plugins-emoji
npm install
npm run dev

添加自己的组件
创建组件文件

在main.js 入口文件的同级目录下，添加index.js 打包的入口文件

import emoji from './plugins/emoji/index.vue'

const components = [
  emoji
]
const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {install, emoji}

可以在入口文件main.js 中正常引用

import aimeePluginsEmoji from './index.js'
Vue.use(aimeePluginsEmoji)

这样在项目中任何地方可以直接使用组件，如下我在app.vue 文件中直接引入使用

到这个地方项目已经创建完了 ，接下来就是修改配置文件

修改配置文件

主要修改的配置文件为 webpack.config.js 和 package.json

webpack.config.js设置

首先项目中因为有图片的引用，需要设置图片为base64，可以通过设置limit 的值来实现。

{
    test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 50000000,
          name: '[name].[ext]?[hash]'
        }
      }

设置入口和输出路径

  entry: process.env.NODE_ENV === 'production'? './src/index.js' : './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'aimee-plugins-emoji.js',
    library: 'aimee-plugins-emoji', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

package.json设置

设置private属性为false，默认为true，npm 发布的时候如果为true会失败。
添加node_module 的入口文件设置，"main": "dist/aimee-plugins-emoji.js"

  "private": false,
  "main": "dist/aimee-plugins-emoji.js",

上传到git 仓库管理

注意 这里gitignore中需要取消对dist文件夹的忽略
仓库管理项目文件

发布到npm

前提：需要注册npm 账号并激活

登录 npm login

image.png

需要看清楚是否是注册的registry，如果是淘宝的会报错

发布 npm publish

![image.png](https://upload-images.jianshu.io/upload_images/13238271-7d21ddfd4202bc15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

生成后的npm包https://www.npmjs.com/package/aimee-plugins-emoji
如果要修改组件内容，需要修改package.json中的版本号，然后重新发布

在项目中使用

通过npm install aimee-plugins-emoji --save-dev 安装到本地
在 项目的main.js 中引用

import aimeePluginsEmoji from 'aimee-plugins-emoji'
Vue.use(aimeePluginsEmoji)

组件中可以通过 使用