站長(zhǎng)資訊網(wǎng)如何從0擼出一個(gè)Vue組件庫(kù)并發(fā)布到npm？下面本篇文章手把手帶大家從0開發(fā)一個(gè)Vue組件庫(kù)，看看怎么發(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" 傳入內(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ā)布很簡(jiǎn)單,只需要兩個(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）
【
