如何從0開發一個Vue組件庫並發布到npm
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組件開發
