發(fā)布一個簡單的npm包
- 首先創(chuàng)建一個文件夾（唯一的命名）
- 創(chuàng)建package.json包，輸出npm init，一直回車就好。
- 創(chuàng)建index.js文件，向外暴露方法。
將包上傳或更新到 npm?
執(zhí)行登錄命令：npm login
登錄npm官網(wǎng)，根據(jù)提示輸入用戶名和密碼，郵箱（郵箱必須在注冊時進行驗證）
?發(fā)布版本，在登陸命令后接著輸入如下命令
npm publish
?發(fā)布上傳后，你可以去 npm 官網(wǎng)上查一下自己的包有沒有存在。
?
?在項目中安裝你的包
npm i xxx -s，在main.js中引用
?
?在vue項目任何頁面使用
?發(fā)布一個自己組件包
1、在項目中添加組件庫文件夾：
在根目錄下新建一個plugins文件夾，用來放組件，項目文件結構為：
?（我的是跟src平級 創(chuàng)建plugins組件文件夾）
?2、添加配置文件
項目根目錄下面添加vue.config.js文件，寫入以下內(nèi)容：（主要是配置webpack的打包）
?3、編寫組件
把封裝的組件、封裝的指令和封裝的過濾器每個都寫在分類文件夾中，后面在合理添加并繼續(xù)封裝。下面我以datetime這個組件為例：（是一個時間顯示組件）
建組件date-time.vue和單獨暴露組件的index.js文件：
?date-time.vue內(nèi)容如下：
<template>
<div class="date-time" :style="{ 'font-size': `${useStyleObj.fontSize}px` }">
<p :style="styleObject">{{ nowDate }}</p>
<p :style="styleObject">{{ nowTime }}</p>
</div>
</template>
<script>
export default {
name: "dateTime",
props: {
styleObj: {//客戶端傳遞的樣式
type: Object,
default: () => ({
fontSize: 25,
color: ["#dcedff", "#5ca9ff"]
})
}
},
computed: {
useStyleObj() {//用computed是為了暴露客戶端的styleObj樣式屬性值可以選填，更加靈活
let size = 25;
let color = ["#dcedff", "#5ca9ff"];
if (this.styleObj.fontSize) {
size = this.styleObj.fontSize;
}
if (this.styleObj.color) {
color = this.styleObj.color;
}
return {
fontSize: size,
color: color
};
},
styleObject() {//根據(jù)客戶端傳遞的樣式值配置文字的漸變色
return {
background: `linear-gradient(180deg,${this.useStyleObj["color"][0]},
${
this.useStyleObj.color.length > 1
? this.useStyleObj["color"][1]
: this.useStyleObj["color"][0]
})`,
"-webkit-background-clip": "text"
};
}
},
data() {
return {
timer: null,
nowWeek: "",
nowDate: "",
nowTime: ""
// styleBox: {}
};
},
created() {
this.timer = setInterval(() => {
this.setNowTimes();
}, 1000); //時間
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
setNowTimes() {//時間拼接方法
const myDate = new Date();
const wk = myDate.getDay();
const yy = String(myDate.getFullYear());
const mm = myDate.getMonth() + 1;
const dd = String(
myDate.getDate() < 10 ? `0${myDate.getDate()}` : myDate.getDate()
);
const hou = String(
myDate.getHours() < 10 ? `0${myDate.getHours()}` : myDate.getHours()
);
const min = String(
myDate.getMinutes() < 10
? `0${myDate.getMinutes()}`
: myDate.getMinutes()
);
const sec = String(
myDate.getSeconds() < 10
? `0${myDate.getSeconds()}`
: myDate.getSeconds()
);
const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const week = weeks[wk];
this.nowDate = `${yy}/${mm}/${dd} ${week}`;
this.nowTime = `${hou}:${min}:${sec}`;
this.nowWeek = week;
}
}
};
//樣式文件
</script>
<style lang="scss" scoped></style>
index.js文件內(nèi)容：為組件提供 install 方法，供組件對外按需引入
import dateTimes from "./date-time.vue";
dateTimes.install = Vue => Vue.component(dateTimes.name, dateTimes); //注冊組件
export default dateTimes;
這個單獨暴露組件的 index.js，意思是如果這個工程值封裝一個組件使用的話，就用這個index.js 文件暴露 install 即可了。?
plugins 文件夾下面新建一個 index.js 文件，為了統(tǒng)一導出所有組件及暴露 install 方法。之前的 index.js 只是安裝單個組件，而現(xiàn)在這個 index.js 是循環(huán)安裝所有組件、所有指令、過濾器統(tǒng)一暴露出去，可以按需引用組件，此時plugins文件夾的內(nèi)容為：
?我這里是統(tǒng)一暴露組件、指令、過濾器：
//組件
import DateTime from "./components/dateTime/date-time.vue"
//所有組件列表
const components = [DateTime]
//定義install方法，Vue作為參數(shù)
const install = Vue => {
//判斷是否安裝，安裝過就不用繼續(xù)執(zhí)行
if (install.installed) return
install.installed = true
//遍歷注冊所有組件
components.map(component => Vue.component(component.name, component))
}
//檢測到Vue再執(zhí)行
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
//所有組件，必須具有install方法才能使用Vue.use()
...components
}
4、在本地頁面中使用組件
在main.js中引入
?在頁面中不用引入使用使用組件，因為是全局注冊了組件庫，所以可以直接使用標簽，這個標簽與組件文件中的date-time.vue里的name保持一致，只不過一個是駝峰式寫法，一個是標簽名稱。
?
?
?測試可以全局使用組件，說明封裝的組件沒有問題，下面可以打包了。
5、打包
在package.json文件中的"scripts"字段里添加以下內(nèi)容：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name 包名 -dest lib plugins/index.js",
"lint": "vue-cli-service lint"
},
因為在vue-cli中，可以通過以下命令將一個單獨的入口打包成庫
// target: 默認為構建應用，改為 lib 即可啟用構建庫模式
// name: 輸出文件名
// dest: 輸出目錄，默認為 dist，這里我們改為 lib
// entry: 入口文件路徑
vue-cli-service build --target lib --name lib [entry]
?package.json中配置打包信息：
- .gitignore文件中添加：
- 把包的一些測試文件過濾掉，最終打包只留下直接封裝的文件，即plugins中封裝的暴露組件
?
?在終端執(zhí)行npm run lib 即可，執(zhí)行結果：
?
?6、發(fā)布包
?7、使用包
npm i xgs_common -s
在項目文件mainjs中引入。
文章來源：http://www.zghlxwxcb.cn/news/detail-625966.html
在項目中直接使用組件中的name即可
例如：<date-time/>文章來源地址http://www.zghlxwxcb.cn/news/detail-625966.html
到了這里，關于如何發(fā)布自己的npm包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
