Vue 组件封装 并使用 NPM 发布 和使用（单个）

1.创建项目*
vue init webpack-simple
npm install
nm run dev
2.添加控件
文件夹 switchButton 里面添加 switch-button.vue页面和index.js

switch-button.vue 页面里面就和平时写插件一样 没有特别注意的地方
index.js 内容如下

// switchButton 插件对应组件的名字
import switchButton from './switch-button.vue';
switchButton.install = Vue => Vue.component(switchButton.name, switchButton);
export default switchButton;

3.修改webpack.config.js

// 执行环境
const NODE_ENV = process.env.NODE_ENV;

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/switchButton/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'switchButton.js',
    library: 'switchButton', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  }

library：指定的就是你使用require时的模块名

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

有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。

这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了

umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的define
修改完成后执行npm run build看下是否生效

4.修改package.json

// 开源因此需要将这个字段改为 false
"private": false,

// 这个指 import tlp_plugin_sum 的时候它会去检索的路径
"main": "dist/switchButton.js",

5.提交发布
在npm官网注册账号，地址：https://www.npmjs.com/，注册好之后，
注意邮箱要验证，会发送验证链接到你的注册邮箱，没有验证的话是不能发布代码的
看一下package.json 中 author 尽量与 npm 账户一致

查看当前地址

npm config get registry
https://registry.npmjs.org/
 需要是   https://registry.npmjs.org/  如果是淘宝先切换一下  或者用nrm 管理
 -- 设置当前地址（设置为淘宝镜像）
npm config set registry http://registry.npm.taobao.org/

-- 设置当前地址（设置为默认地址）
npm config set registry https://registry.npmjs.org/
 

登录npm账号，输入用户名、密码、邮箱

npm login

npm publish 执行发布

npm publish

发布成功 npm 上面就有你的组件了

npm i link_jump  //安装到项目

项目中的使用

 <switchButton :con="con" ></switchButton>
 import switchButton  from 'link_jump'
 components: {switchButton},