手把手教你写vue插件并发布到npm（一）

àì夳堔傛蜴生んèń 2023-06-07 05:35 182阅读 0赞

##  vue的插件开发 ##

--------------------

这篇文章较长，需要一定的阅读时间。这里有一份改善版本的插件笔记，在一个项目下完成开发、测试、发布的全过程。[https://www.cnblogs.com/adouwt/p/9655594.html][https_www.cnblogs.com_adouwt_p_9655594.html]

\--2019年1月15日更新。

**反映问题：**

**执行 npm publish  报错**，因为有些同学本地设置了 淘宝的npm 镜像源，npm 包发布到这个镜像源就有问题了，最简单的方式是 ：**发布时候指定地址**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>npm publish -registry=https:</code><code>//registry.npmjs.org/</code></p> </td> 
  </tr> 
 </tbody> 
</table>

\--2019年4月3号更新

--------------------

### 1.本地开发 ###

1.1 初始化本地开发项目

我们采用vue-cli，初始化一个vue 项目。这个不做详解，请移步到 这里 [https://www.cnblogs.com/anxiaoyu/p/7071143.html][https_www.cnblogs.com_anxiaoyu_p_7071143.html]，查看具体详细。初始化后就是这样的项目结构：

![format_png][]

其他的文件目录不是本节内容重点，不做详解，请移步这里查看 [https://blog.csdn.net/tanzhenyan/article/details/78871610][https_blog.csdn.net_tanzhenyan_article_details_78871610]。

1.2 test.js 的内容 ，这是插件的入口文件

![format_png 1][]

关于为什么需要在install这个方法这里添加我们的方法，可以参考官网。[https://cn.vuejs.org/v2/guide/plugins.html][https_cn.vuejs.org_v2_guide_plugins.html]  这里只是用了其中的一部分的内容。

test.js的代码如下：

按 Ctrl+C 复制代码

test.js 里面引入的两个vue 文件，这两个文件就是我们需要开发的组件样式。

panel.vue

按 Ctrl+C 复制代码

实现的效果如下：

![format_png 2][]

点击面板上的数字，及时展现在上面，具体的样式不做详解，逻辑很简单。

toast.vue

按 Ctrl+C 复制代码

效果如下：

![format_png 3][]

这里模拟的是，调用该插件的toast 方法。

### 2.本地测试 ###

我们上面就直接给出了我们要完成的内容，但是怎么确定我们这个写的样式或者方法可以用呢？ 所以需要测试下，我们到底写的是个什么鬼。

**main.js 全局import **

**　　![format_png 4][]**

具体页面使用我们的插件：

![format_png 5][]

两个效果如下：

![format_png 6][]

### 3.打包到npm ###

测试完成，可以实现我们的想要的内容。下面我们就要把我们的内容打包发布到npm 上去。

为了不和开发的项目环境发生冲突，我们采用另外一个项目，专门做打包发布的。

工具：

webpack-simple  这个简化版的webpack。 初始化项目，点击这里,[ https://www.cnblogs.com/majj/p/9054471.html][https_www.cnblogs.com_majj_p_9054471.html]。删掉我们不需要的文件夹，新建一个我们要放置我们开发代码，完成如下：

![format_png 7][]

修改webpack.config.js的打包名称

![format_png 8][]

代码如下：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

var path = require('path')
    var webpack = require('webpack')
    
    module.exports = {
      entry: './src/lib/index.js',
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'toastPanel.js',
        library: 'toastPanel', // library指定的就是你使用require时的模块名，这里便是require("toastPanel")
        libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
        umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              'css-loader'
            ],
          },      {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
              }
              // other vue-loader options go here
            }
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]'
            }
          }
        ]
      },
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
      devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
      },
      performance: {
        hints: false
      },
      devtool: '#eval-source-map'
    }
    
    if (process.env.NODE_ENV === 'production') {
      module.exports.devtool = '#source-map'
      // http://vue-loader.vuejs.org/en/workflow/production.html
      module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })
      ])
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

打包的项目清单配置文件：

![format_png 9][]

执行 **npm run build  打包**

**　　![format_png 10][]**

**　　发布到npm:**

**　　**注册npm 不做详解，请看这里,[https://cnodejs.org/topic/5823c4411120be9438b02a31][https_cnodejs.org_topic_5823c4411120be9438b02a31] ,核心操作就这么几步骤，一做就会

![format_png 11][]

（插一句：注册账户我遇到一个坑，注册完后，npm官网的小姐姐会让你验证邮箱，验证完成后，需要退出登录重新登录，不然会一直提示你要验证邮箱），蹩脚的邮件交流如下，请忽略细节，仔细看划线位置。

![format_png 12][]

查看当前环境下的用户：

npm whoami

![format_png 13][]

npm login

![format_png 14][]

发布：

npm publish

![format_png 15][]

我们顺便看看，npm 官网是不是有我们的刚才发布的内容，[https://www.npmjs.com/package/vue-panel-toast][https_www.npmjs.com_package_vue-panel-toast]

![format_png 16][]

### 4.安装使用 ###

**安装：**

**npm install  vue-panel-toast --save**

**　使用：**

**　　***main.js 全局引入*

![format_png 17][]

*具体页面使用：*

![format_png 18][]

*效果如下：*

![format_png 19][]

开发测试到发布流程OK，样式和具体的业务效果需要在调试，总算是流程跑通，具体开发出什么样的普惠众生的插件或者UI组件，就看各位小哥哥小姐姐的拳脚啦。

已经完成的下一篇的文章是开发和发布的任务都集合在一个项目文件下，欢迎查看：[https://www.cnblogs.com/adouwt/p/9655594.html][https_www.cnblogs.com_adouwt_p_9655594.html]

下个目标：

这个是全局使用，下次改进到 页面单独使用插件，目前是按需引入使用报错。

如果有错误之处，敬请指出。

转载：[https://www.cnblogs.com/adouwt/p/9211003.html][https_www.cnblogs.com_adouwt_p_9211003.html]

[https_www.cnblogs.com_adouwt_p_9655594.html]: https://www.cnblogs.com/adouwt/p/9655594.html
[https_www.cnblogs.com_anxiaoyu_p_7071143.html]: https://www.cnblogs.com/anxiaoyu/p/7071143.html
[format_png]: /images/20230601/f6abae42ee114f3bbfc3cbfccc18427e.png
[https_blog.csdn.net_tanzhenyan_article_details_78871610]: https://blog.csdn.net/tanzhenyan/article/details/78871610
[format_png 1]: /images/20230601/390c128139074655a9e62f72ef88785f.png
[https_cn.vuejs.org_v2_guide_plugins.html]: https://cn.vuejs.org/v2/guide/plugins.html
[format_png 2]: /images/20230601/877fb469ee8a4a50a37a847363634a8e.png
[format_png 3]: /images/20230601/24a70de6831944fcb4f27f541d70a084.png
[format_png 4]: /images/20230601/ed08f830f33649f5a5796f67218c572f.png
[format_png 5]: /images/20230601/765582d43d2d4df8ae9723b62abe1e9e.png
[format_png 6]: /images/20230601/30208d33d89547c584c35d6773470f1b.png
[https_www.cnblogs.com_majj_p_9054471.html]: https://www.cnblogs.com/majj/p/9054471.html
[format_png 7]: /images/20230601/841f62d696f84924bb8173682fe25399.png
[format_png 8]: /images/20230601/f3762bb24b30408494d30a186d771e5d.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230601/a62d827a01cc4da9acc2f3735e368310.png
[format_png 9]: /images/20230601/aad38e6d74644a86af8dbd9591836370.png
[format_png 10]: /images/20230601/c88d5a5c9206491283eb235f9fa639e3.png
[https_cnodejs.org_topic_5823c4411120be9438b02a31]: https://cnodejs.org/topic/5823c4411120be9438b02a31
[format_png 11]: /images/20230601/d57739f7f7064b819261828baaabe098.png
[format_png 12]: /images/20230601/bd250276dee94145ad38603cb1859e58.png
[format_png 13]: /images/20230601/77f8c20e5aa1453292fb566a43697dc0.png
[format_png 14]: /images/20230601/4c4c878d4dce4830a0d144c32a840575.png
[format_png 15]: /images/20230601/0e965749186b4dcb956d09ba92833d47.png
[https_www.npmjs.com_package_vue-panel-toast]: https://www.npmjs.com/package/vue-panel-toast
[format_png 16]: /images/20230601/a321d934b9024e4e8c2e0b8c2340a006.png
[format_png 17]: /images/20230601/8f8302df3d034c4e9b4bf9180febca61.png
[format_png 18]: /images/20230601/d0d1cf132bf34dbc945721689cc55dfa.png
[format_png 19]: /images/20230601/c54d58871b1b4b8ca47ac1eb9c2cb876.png
[https_www.cnblogs.com_adouwt_p_9211003.html]: https://www.cnblogs.com/adouwt/p/9211003.html