如何從0擼出一個(gè)Vue組件庫并發(fā)布到npm？下面本篇文章手把手帶大家從0開發(fā)一個(gè)Vue組件庫，看看怎么發(fā)布到npm，希望對(duì)大家有所幫助。

1、新建文件夾在終端打開執(zhí)行 npm init -y

生成package.json如下,注意如果要發(fā)布到npm,name不能有下劃線,大寫字母等

{   "name": "vuecomponentdi",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC" }

2、建立目錄結(jié)構(gòu)

目錄結(jié)構(gòu)如下

-- vueComponentDi     -- packages         -- button             -- index.js             -- index.vue         -- toast             -- index.js             -- index.vue     -- index.js     -- package.json

3、本地調(diào)試

• vueComponentDi/index.js

export default function(){     console.log('本地調(diào)試') }

• 新建一個(gè)vue項(xiàng)目

vue create testvue

在testvue下的package.json下的測(cè)試依賴devDependencies添加vueComponentDi/index.js絕對(duì)地址

"devDependencies": {     ...     "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根據(jù)自己實(shí)際項(xiàng)目地址填寫     ...     }

• 執(zhí)行npm link

在testvue執(zhí)行npm link將vuecomponentdi軟鏈接到node_modules中

• vuecomponentdi安裝Eslint

由于testvue引入組件會(huì)進(jìn)行Eslint檢測(cè),不安裝會(huì)報(bào)錯(cuò)(testvue關(guān)閉Eslint可省略這一步)

安裝方法:

 npm install eslint@6.7.2 --save-dev  ./node_modules/.bin/eslint --init

• 在testvue使用vuecomponentdi

import test from "vuecomponentdi"

<template>   <div class="home">     <img alt="Vue logo" src="../assets/logo.png">     <HelloWorld msg="Welcome to Your Vue.js App"/>   </div> </template>  <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import test from "vuecomponentdi" export default {   name: 'Home',   components: {     HelloWorld   },   created(){     test()   } } </script>

控制臺(tái)打印>本地調(diào)試

4、開發(fā)一個(gè)button組件

• button模塊:進(jìn)入vueComponentDi/packages/button/index.vue

type只支持傳入primary屬性,v-on="

$listeners"表示包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$

listeners"表示包含了父作用域中的(不含.native修飾器的)v?on事件監(jiān)聽器。它可以通過v?on="listeners" 傳入內(nèi)部組件

<template>     <div>         <button class="di-button"  v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button>     </div> </template> <script> export default {     name:"di-button",     props:{         type:String     } } </script> <style> .di-button{     display: inline-block;     line-height: 1;     white-space: nowrap;     cursor: pointer;     background: #fff;     border: 1px solid #dcdfe6;     color: #606266;     -webkit-appearance: none;     text-align: center;     box-sizing: border-box;     outline: none;     margin: 0;     transition: .1s;     font-weight: 500;     -moz-user-select: none;     -webkit-user-select: none;     -ms-user-select: none;     padding: 12px 20px;     font-size: 14px;     border-radius: 4px; } .di-button:focus, .di-button:hover {     color: #409eff;     border-color: #c6e2ff;     background-color: #ecf5ff; } .di-button:active {     color: #3a8ee6;     border-color: #3a8ee6;     outline: none; } .di-button--primary {     color: #fff;     background-color: #409eff;     border-color: #409eff; } .di-button--primary:focus, .di-button--primary:hover {     background: #66b1ff;     border-color: #66b1ff;     color: #fff; } .di-button--primary.is-active, .di-button--primary:active {     background: #3a8ee6;     border-color: #3a8ee6;     color: #fff; } </style>

• button模塊導(dǎo)出:進(jìn)入vueComponentDi/packages/button/index.js

如果導(dǎo)出一個(gè)帶有install函數(shù)的對(duì)象,則在Vue2中可以直接使用Vue.use(xx)調(diào)用此函數(shù),既執(zhí)行 Vue.component(name,option)創(chuàng)建了一個(gè)組件

import button from "./index.vue" button.install=(Vue)=>{     Vue.component(button.name,button) } export default button

• 聚合導(dǎo)出button:進(jìn)入vueComponentDi/index.js

因?yàn)殚_發(fā)的組件不止一個(gè),所以需要在入口文件統(tǒng)一導(dǎo)出

import diButton from "./packages/button" export {     diButton }

• 在testvue使用

<template>   <div class="home">     <di-button type="primary">按鈕</di-button>   </div> </template> <script> // @ is an alias to /src  import Vue from 'vue' import {diButton} from "vuecomponentdi" Vue.use(diButton) export default {   name: 'Home' } </script>

5、開發(fā)一個(gè)toast彈窗

• toast模塊:vueComponentDi/packages/toast/index.vue

type只支持warning和success

<template>     <div class="di-toast" :class="`di-toast--${type}`" v-if="show">         {{message}}     </div> </template> <script> export default {     data(){         return {             message:'',             show:false,             type:''         }     } } </script> <style> .di-toast{     width: 60%;     width: 200px;     background: rgb(15, 15, 15);     padding:3px;     text-align: center;     color: #fff;     border-radius: 10px;     position: fixed;     left: calc(50% - 100px);     top: 200px; } .di-toast--warning{     background: #FDF6EC;     color: #E6A28B; } .di-toast--success{     background: #F0F9EB;     color: #93C26D; } </style>

• toast模塊導(dǎo)出:vueComponentDi/packages/toast/index.js

因?yàn)閠oast彈窗需要在vue中支持this.$toast調(diào)用,所以用了Vue.extend方法,這個(gè) API 在日常開發(fā)中很少使用,一般在開發(fā)組件的時(shí)候它才能派上用場(chǎng),官方定義:使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象

import toast from './index.vue' toast.install = (Vue) => {     const toastConstructor = Vue.extend(toast);//使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。     let $vm = new toastConstructor();//將這個(gè)子類實(shí)例化     let $el = $vm.$mount().$el;//$vm執(zhí)行$mount()手動(dòng)掛載會(huì)返回一個(gè)帶有$el的對(duì)象,$el就是一個(gè)dom對(duì)象     document.querySelector("body").appendChild($el);//將這個(gè)dom對(duì)象添加到body中     //在Vue原型上注入$toast方法     Vue.prototype.$toast = (option) => {         $vm.show = true         if (!(option instanceof Object)) {             //如果傳的不是對(duì)象直接彈出             $vm.message = option         } else {             $vm.message = option.message             $vm.type = option.type         }         setTimeout(() => {             $vm.show = false         }, 2000)     } }   export default toast

• 聚合導(dǎo)出:vueComponentDi/index.js

import diButton from "./packages/button"  import toast from "./packages/toast"   export {     diButton,     toast }

• vuetest中使用toast

<template>   <div class="home">     <di-button type="primary" @click="toast">按鈕</di-button>   </div> </template> <script> // @ is an alias to /src  import Vue from "vue"; import { diButton, toast } from "vuecomponentdi"; Vue.use(diButton); Vue.use(toast); export default {   name: "Home",   methods: {     toast() {       // this.toast("這是一個(gè)普通彈窗");       // this.$toast({       //   message: "這是一個(gè)成功彈窗",       //   type: "success",       // });       this.$toast({         message: "這是一個(gè)警告彈窗",         type: "warning",       });     },   }, }; </script>

6、發(fā)布到npm

• 公有配置

組件開發(fā)完成需要發(fā)布到npm以便于別人使用;因?yàn)榘l(fā)布的是公有包,所以需要在vueComponentDi/package.json中配置

"publishConfig": {     "access": "public"   },

完整package.json:

{   "name": "vuecomponentdi",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "eslint": "^6.7.2",     "eslint-plugin-vue": "^8.2.0"   },   "publishConfig": {     "access": "public"   } }

• 發(fā)布

npm發(fā)布很簡單,只需要兩個(gè)命令:

npm login npm publish

執(zhí)行npm login需要你有npm賬號(hào)，可以到 npm官網(wǎng) 注冊(cè)

npm官網(wǎng)地址：https://www.npmjs.com/

發(fā)布完成之后就可以在任何一個(gè)vue2項(xiàng)目中安裝使用了:

npm install vuecomponentdi

git地址: vue組件開發(fā)（https://gitee.com/geeksdidi/vue-component-di）

【