技術文章 » 如何從0開發一個Vue元件庫並行布到npm

如何從0開發一個Vue元件庫並行布到npm

2022-06-20 15:01:29

1、新建資料夾在終端開啟執行 npm init -y

生成package.json如下,注意如果要釋出到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、建立目錄結構

目錄結構如下

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

3、本地偵錯

  • vueComponentDi/index.js
export default function(){
console.log('本地偵錯')
}
  • 新建一個vue專案
vue create testvue

在testvue下的package.json下的測試依賴devDependencies新增vueComponentDi/index.js絕對地址

"devDependencies": {
...
"vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根據自己實際專案地址填寫
...
}
  • 執行npm link

在testvue執行npm link將vuecomponentdi軟連結到node_modules中

  • vuecomponentdi安裝Eslint

由於testvue引入元件會進行Eslint檢測,不安裝會報錯(testvue關閉Eslint可省略這一步)

安裝方法:

npm install [email protected] --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>

控制檯列印>本地偵錯

4、開發一個button元件

  • button模組:進入vueComponentDi/packages/button/index.vue
    type只支援傳入primary屬性.
    v-on = "$listemers"表示包含了父作用域中的(不含.native修飾符的) v-on事件監聽器,它可以通過v-on="$listerners"傳入內部元件
<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模組匯出:進入vueComponentDi/packages/button/index.js

如果匯出一個帶有install函數的物件,則在Vue2中可以直接使用Vue.use(xx)呼叫此函數,既執行 Vue.component(name,option)建立了一個元件

import button from "./index.vue"
button.install=(Vue)=>{
Vue.component(button.name,button)
}
export default button
  • 聚合匯出button:進入vueComponentDi/index.js

因為開發的元件不止一個,所以需要在入口檔案統一匯出

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、開發一個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模組匯出:vueComponentDi/packages/toast/index.js

因為toast彈窗需要在vue中支援this.$toast呼叫,所以用了Vue.extend方法,這個 API 在日常開發中很少使用,一般在開發元件的時候它才能派上用場,官方定義:使用基礎 Vue 構造器，建立一個「子類」。引數是一個包含元件選項的物件

import toast from './index.vue'
toast.install = (Vue) => {
const toastConstructor = Vue.extend(toast);//使用基礎 Vue 構造器，建立一個「子類」。引數是一個包含元件選項的物件。
let $vm = new toastConstructor();//將這個子類範例化
let $el = $vm.$mount().$el;//$vm執行$mount()手動掛載會返回一個帶有$el的物件,$el就是一個dom物件
document.querySelector("body").appendChild($el);//將這個dom物件新增到body中
//在Vue原型上注入$toast方法
Vue.prototype.$toast = (option) => {
$vm.show = true
if (!(option instanceof Object)) {
//如果傳的不是物件直接彈出
$vm.message = option
} else {
$vm.message = option.message
$vm.type = option.type
}
setTimeout(() => {
$vm.show = false
}, 2000)
}
}


export default toast
  • 聚合匯出: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("這是一個普通彈窗");
// this.$toast({
// message: "這是一個成功彈窗",
// type: "success",
// });
this.$toast({
message: "這是一個警告彈窗",
type: "warning",
});
},
},
};
</script>

6、釋出到npm

  • 公有設定

元件開發完成需要釋出到npm以便於別人使用;因為釋出的是公有包,所以需要在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"
}
}
  • 釋出

npm釋出很簡單,只需要兩個命令:

npm login
npm publish

執行npm login需要你有npm賬號,可以到 npm官網 註冊
釋出完成之後就可以在任何一個vue2專案中安裝使用了:

npm install vuecomponentdi

git地址: vue元件開發