npm发布组件包并使用(含多个组件)

1.创建vue项目，为了简洁方便，推荐使用webpack-simple构建一个项目

vue init webpack-simple  ceshi
npm install
npm run dev

添加控件 components 文件 如图

aa.vue页面 写了简单的案例

<template>
  <div class='aa' >
     {{con}}
  </div>
</template>


<script>
  export default({
    name:'aa',
    // 父元素传入的数据
    props: {
      con:{type:String(),  default:"", },
    },
  })
</script>


<style>

  .aa{
    display: inline-block;
    position: relative;
    border: 2px solid #ddd;
    box-sizing: border-box;
    background: #2465cd;
  }

</style>

aa 文件夹下面的 index.js

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

bb.vue 与aa,vue 雷同 。。。
bn 文件夹下面的 index.js

import bb from './bb.vue';
bb.install = Vue => Vue.component(bb.name, bb);
export default bb;

在与App.vue同级目录下新建index.js;引入所有组件集中管理然后全部导出(多组件和单组件同理)

import aa from "./components/aa/index";
import bb from "./components/bb/index";
const components = [
  aa,
  bb
  // ...如果还有的话继续添加
]

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

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

export default {
  //总体
  install,
  //支持按需引入
  aa,
  bb
}

修改配置文件
打包之前，首先我们需要改一下 webpack.config.js 这个文件

 entry:process.env.NODE_ENV=='development'?'./src/main.js':'./src/index.js', //
  output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: "light-com.js",
    library: "light-com", // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

修改 package.json 文件（主要修改这两值）

 "private": false,
  "main": "dist/light-com.js",
  "files": ["dist/*","src/*","*.json", "*.js"],

打包项目

npm  run  build

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 light-com //安装到项目

项目中的使用

import lightBom from 'light-com'
components: { cTabs,switchButton, aa:lightBom.aa,bb:lightBom.bb}