npm发布自己的vue组件

npm发布自己的vue组件

1、在src目录下新建一个文件夹，在文件夹下面创建一个自己封装的组件以及配置的js文件

举个栗子，创建一个my-components文件夹，在文件夹下创建一个helloCom.vue组件和一个index.js

// helloCom.vue

<template>
  <div>
    <h1>测试的组件</h1>
    <div>
      <span>测试动态值num:{{num}}</span>
      <el-button type="primary" @click="num++">点击num++</el-button>
    </div>
    <h2>父组件传的值{{tel}}</h2>
  </div>
</template>

<script>
  export default {
    name: "helloCom",
    props: {
      tel: {
        type: Number,
        default: () => 111
      }
    },
    data() {
      return {
        num:1
      }
    },
    watch:{
      num(val){
        this.$emit('valChange',val)
      }
    }
  }
</script>

<style scoped lang="less">
</style>

// index.js

import helloCom from "./helloCom";

const install=(Vue)=>{
  Vue.component(helloCom.name, helloCom)
}

export default install

2、修改package.json，新增一个打包命令build-com

–target lib (指定打包文件路径)

–name (打包后的文件名)

–dest (打包后的文件夹名)

{
  "name": "component-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-com": "vue-cli-service build --target lib ./src/my-components/index.js --dest helloCom --name helloCom"
  },
  "dependencies": {
    ....
  },
  "devDependencies": {
    ....
  }
}

执行npm run build-com 命令，在根目录下会出现一个helloCom文件夹，里面未为包好的文件

3、在根目录下新建一个pakages文件夹，用于初始化npm以及打包

​ 1.将上述步骤打包好的helloCom文件夹中查找 xxxx.umd.min.js 和 xxxx.css 两个文件，复制到pakages文件夹，修改xxxx.umd.min.js 文件名为index.js

​ 2.进入pakages文件目录下，执行 npm init -y ，执行完后会在pakages下出现一个package.json，修改package.json

// 主要修改name和main两个配置
{
  "name": "hello-com-test",  // npm的包名，不能和npm已有的npm报名重复
  "version": "1.0.1",
  "description": "",
  "main": "index.js",   // js入口文件，若没有修改xxxx.umd.min.js的文件名，则此处改为xxxx.umd.min.js
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue"
  ],
  "author": "didongyi",
  "license": "ISC"
}

4、发布到npm

1. 进入pakages文件夹，打开cmd窗口

2. 如果没有npm账号，登录 https://www.npmjs.com/ 官网去注册账号

3. 切换nrm的地址为npm原地址，若果没有安装nrm，先安装

npm i nrm -g

4. 执行nrm ls查看当前的路径，执行 nrm use npm 切回npm原路径

nrm ls
nrm use npm

5. 执行npm login，输入用户名和密码

npm login

6. 执行npm publish，发布到npm

npm publish

7. 登录官网，点击小头像进入到packages下看看是否有自己的包

5、引入自己发布的包

1. 在官网点击进入自己的包，右边有安装命令，复制后在项目中运行安装

2. 在项目的main.js中引入即可

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import  helloCom  from 'hello-com-test' // 引入入口文件
import 'hello-com-test/helloCom.css' // 引入样式文件

Vue.config.productionTip = false

Vue.use(helloCom)  // vue使用组件

6、更新自己发布的包

若修改了组件，要更新到npm上，则改完后执行下面这三个命令中的一个

npm version patch   // 如果说要改为1.0.x，最后一位增加了1，这个是补丁的意思，就是小小的改一下
npm version minor   // 如果说要改为1.x.0，中间一位增加了1，这个是小修小改
npm version major   // 如果说要改为x.0.0，第一位增加了1，这个是大改

然后再发布即可

npm publish