vue封装组件并发布到npm

封装组件

1.新建一个js文件，用于全局注册vue组件

可能有多个组件需要发布, 所以我们可以批量使用Vue.component进行全局注册, 这也就是为什么想element-ui这类组件能够在use之后可以在任意组件中使用的原因

vue组件

<script>
export default {
  name: 'InformationManage',   //需要封装的vue组件，必须要有name值
  data() {
    return {
    }
 }
 </script>

index.js文件

import InformationManage from './components/InformationManage'

const coms = [InformationManage]// 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
const install = function (Vue) {
  coms.forEach(com => {
    Vue.component(com.name, com) 
  })
}

export default install // 这个方法以后在使用的时候可以被use调用

2.在package.json配置打包路径

我们在package.json中添加一条指令，代码如下：（借用了vue-cli的构建方法，构建单独的入口）
– target lib 关键字 指定打包的目录 后面可以接上entry打包入口
– name 打包后的文件名字
– dest 打包后的文件夹的名称

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib ./src/index/index.js --name ics-imedx-visit --dest lib"
  },

3.打包组件

npm run lib

打包之后的文件目录

4.构建需要发布的文件夹

• 直接在打包文件夹下

1. npm init -y : 初始化 package.json
2. 添加 readMe文件（方便读者操作）

• 任意目录新建需要发布的文件夹

1. 例：在根目录下新建webpack文件夹，新建打包组件的文件，存放打包后的umd.min.js文件和css文件
2. npm init -y : 初始化 package.json
3. 添加 readMe文件（方便读者操作）

发布到npm

将源切换成npm官方源

   npm config set registry http://registry.npmjs.org/

1.npm login（登录）

1. npm 注册账号
2. 将终端切到需要发布的文件夹下（打包文件或者新创建的发布文件）
3. npm login

注意：

1. 输入密码时，默认是不显示的，正常输入就行
2. npm whoami 可以测试当前是否是登录

    npm login

2. npm publish (发布)

注意：
1.私有包@开头的，发布时需要添加 --access public

3.发布成功后，可在npm上查看

使用

请参考readMe