封裝Vue組件併發布到npm上

一 、構建一個vue項目

vue create hello-world

1.建立組件

在src/components/JudyButton.vue

組件內容：

<template>
    <div>
        <button :class="type == 'Default'?'btn default':type == 'primary'?'btn primary':type == 'danger'?'btn danger':'btn default'" 
            @click="confirm"
        >
            <slot></slot>
        </button>
    </div>
</template>
<script>
export default {
    name:'judy-button',
    props:{
        type:{
            type:String,
            default:"Default"
        }
    },
    methods:{
        confirm(){
            this.$emit("confirm")
        }
    }
}
</script>
<style scoped>
     .btn{
        width: 100px;
        height: 40px;
        color:#fff;
        text-align: center;
        line-height:40px;
        border: none;
        cursor: pointer;
    }
    .default{
        background-color:rgb(26, 185, 87);
        box-shadow:0 7px 0 rgb(28, 158, 78), 0 8px 3px rgba(0, 0, 0, 0.3);
    }

    .primary{
        background: rgba(18, 117, 197);
        box-shadow: 0 7px 0 rgba(7, 48, 66, 0.829),0 8px 3px rgba(0, 0, 0, 0.3);
    }

    .danger{
        background: rgb(255, 20, 20);
    }

    .default:hover,.default:focus{
         background-color:rgba(26, 185, 87,0.6);
    }

    .primary:hover,.primary:focus{
        background: rgba(18, 117, 197, 0.75);
        
    }
</style>

2. App.vue同級建立index.js

目的是：爲了將全部的組件集中，放在一個文件家裏便於管理。

index.js內容

// 引入相關的組件
import JudyButton from "./components/JudyButton.vue"


const components = [
    JudyButton,
	//還能夠再寫別的組件
    
]
var comObj = {};
comObj.install = (Vue) => {
	components.map(component => {
		 Vue.component(components[key].name, components[key]) //註冊組件  
        comObj[components[key].name] = components[key];
	})
}

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

export default comObj //默認全局導出
export {
    JudyButton   //     按需導出
}

3. 修改package.json裏面的值

{
  "name": "judybutton",
  "version": "0.0.1",
  "private": false,
  "main": "lib/Judy-Button.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:components": "vue-cli-service build --dest lib --target lib src/index.js",
    "lint": "vue-cli-service lint"
  },

二. 發佈到npm

npm login  //登陸npm
npm publish

完成以後咱們就能夠在項目中安裝使用了

三. 在組建中引用和下載

1. 下載

npm i judybutton

2. 引用

在main.js中引用

//全局引用
 import JudyButton from 'judybutton'
 import 'judybutton/lib/Judy-Button.css'
 Vue.use(JudyButton)

在組件中使用 局部引用

<template>
    <div>
        <judy-button 
        type="primary"
        @confirm="confirm"
        >按鈕</judy-button>
    </div>
</template>

<script>
//局部引用 => 按需引用
 import { JudyButton } from 'judybutton'  
 import 'judybutton/lib/Judy-Button.css'

export default {
    name:"show-blog",
    components:{
        JudyButton
    },
    data(){
        return {
        }
    },
    mounted(){
    },
    methods:{
        confirm(){
            console.log('點擊按鈕')
        }
    }
}
</script>

注意：每次上到 npm 上須要更改版本號，package.json 裏的 version 字段。