脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 插件 npm

用vue封装插件并发布到npm的方法步骤

 更新时间：2017年10月18日 10:02:15   作者：rithe  
本篇文章主要介绍了用vue封装插件并发布到npm的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、基于vue的国家区号列表

vue-flag-list包含了大部分国家的区号，点击右边的三角形展开列表可以选择国家区号，若列表中没有区号，也可以自己输入区号。

全球区号列表

1.1 初始化组件

用的是vue-cli来初始化组件，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来。

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 根据自己的需求，实现具体功能，我的主要功能写在vue-flag-list.vue组件中。

<template>
 <div id="flag">
 ...
 </div>
</template>

<script>
 export default {
  name: 'vue-flag-list',
  ...
 }
</script>

<style scoped>
 ...
</style>

功能写好后，修改package.json等配置文件，为打包发布做准备

1.3 添加index.js

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 修改配置文件

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因为组件包是公用的，所以private为false
 "private": false,
 // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夹
 "files": [
 "dist",
 "src"
 ],
 // 指定关键字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //开源协议
 // 项目官网的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2 .gitignore 文件

因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

1.4.3 webpack.prod.conf.js 文件

为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget，其支持的格式有：

  • “var” - 以一个变量形式输出： var Library = xxx (default)；
  • “this” - 以 this 的一个属性输出： this[“Library”] = xxx；
  • “commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；
  • “commonjs2” - 以 module.exports 形式输出：module.exports = xxx；
  • “amd” - 以 AMD 格式输出；
  • “umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。

以下是 webpack.prod.conf.js 中 output 设置的示例：

 output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以 <script> 标签形式直接引入，你会发现并不能正常执行，提示 vue 未定义。

以 <script> 标签形式使用组件时，会同样使用 <script> 标签导入 Vue。Vue 导入的变量是 “window.Vue” 而不是 “window.vue”，因此会出现 vue 未定义的错误。

所以，我们需要在 webpack.prod.conf.js 中配置 externals，如下：

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

另外，为了将css打包成一个文件，所以需要将 webpack.prod.conf.js 中的plugins 选项的

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

修改为

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

修改入口文件

entry: {
 app: './src/index.js'
 },

1.5 整理一下目录结构，我的目录结构如下：

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

二、用npm发布一个包

在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。

2.1 打包到本地使用

npm build
npm pack

npm pack 之后，就会在当前目录下生成 vue-flag-list-1.0.0.tgz 的文件。

打开一个新的vue项目，在当前路径下执行('路径' 表示文件所在的位置)

cnpm install 路径/vue-flag-list-1.0.0.tgz

在新项目的入口文件（main.js）中引入

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)

在组件中使用

<flagCode height="30" width="120" @getCode="getCode"></flagCode>

methos: {
 getCode(code) {
  console.log(code)
 }
}

2.2 发布到npm

1、在 npm官网 注册一个npm账号

2、切换到需要发包的项目根目录下，登录npm账号，输入用户名、密码、邮箱

npm login

3、最后一步，执行npm publish即可

# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0

三、后记

折腾了很久，终于把vue-flag-list插件的雏形发布出去了，这是一个很简单的插件，以后会继续维护它，添加更多的实用功能。

  • npm unpublish --force：移除一个发布包（也可以移除指定版本的包）
  • npm logout：登出用户

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目记录锁定和解锁功能实现

    vue项目记录锁定和解锁功能实现

    这篇文章主要为大家详细介绍了vue项目记录锁定和解锁功能实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解elementui之el-image-viewer(图片查看器)

    详解elementui之el-image-viewer(图片查看器)

    这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue2实现数据请求显示loading图

    vue2实现数据请求显示loading图

    这篇文章主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue字符串中如何添加多个空格

    Vue字符串中如何添加多个空格

    这篇文章主要介绍了Vue字符串中如何添加多个空格问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue子组件调用父组件事件的3种方法实例

    Vue子组件调用父组件事件的3种方法实例

    大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,这篇文章主要给大家介绍了关于Vue子组件调用父组件事件的3种方法,需要的朋友可以参考下
    2024-01-01
  • 快速解决vue在ios端下点击响应延时的问题

    快速解决vue在ios端下点击响应延时的问题

    今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解如何理解vue的key属性

    详解如何理解vue的key属性

    这篇文章主要介绍了详解如何理解vue的key属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue超详细讲解重试机制示例

    Vue超详细讲解重试机制示例

    这篇文章主要介绍了Vue重试机制示例，重试指的是当加载出错时，有能力重新发起加载组件的请求。异步组件加载失败后的重试机制，与请求服务端接口失败后的重试机制一样
    2023-01-01
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue+jsplumb实现工作流程图的项目实践

    vue+jsplumb实现工作流程图的项目实践

    本文主要介绍了vue+jsplumb实现工作流程图的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04

最新评论