发布自己的插件到NPM上

一、项目创建

1、使用简洁的webapck配置模板webpack-simple初始化项目

vue init webpack-simple vue-name
#简洁的webapck配置模板

2、编写组件代码

二、发布到 npm

在发布前，我们要修改我们的配置文件

1.webpack.config.js

// 原
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
...
}
// 新
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'index.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
...
｝

2.package.json

3.登陆npm

npm login

输入用户名，密码，邮箱即可

4.发布（发布时我们一定要把源切换回npm）

npm publish

记住：每一次更新发布，都要修改一下package中的version版本

5.我们去npm中即可看到

三、使用

npm安装此插件

npm i yls-input -D

方式一：全局使用

import Input from 'yls-input'
Vue.use(Input)

方式二：局部使用