主要是記錄體驗(yàn)使用Vue CLI3自定義插件并發(fā)布到npm，然后在項(xiàng)目里下載使用的一個(gè)過程霎桅。
大綱
- 寫一個(gè)簡單的插件(寫插件注意事項(xiàng))
- 打包庫的相關(guān)配置
- 注冊(cè)npm遇革，登錄npm
- 發(fā)布流程
- 刪除已上傳包（短時(shí)間內(nèi)上傳的包）
- 刪除已上傳較長時(shí)間的包
npm unpublish --force //強(qiáng)制刪除锻霎，這個(gè)是撤銷24小時(shí)發(fā)布的包旋恼，有些包發(fā)布久了冰更，這個(gè)方法不會(huì)再管用了舟铜。
npx force-unpublish package-name '原因描述' //是刪除已經(jīng)發(fā)布好的包
- 版本更新發(fā)布時(shí)操作。
- 發(fā)布成功下載使用時(shí)樣式丟失問題归斤。
一痊夭、寫一個(gè)簡單的插件
官方文檔是這么說的：
Vue.js的插件應(yīng)該暴露一個(gè)install方法。這個(gè)方法的第一個(gè)參數(shù)是Vue構(gòu)造器脏里，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象她我。
MyPlugin.install = function(Vue){
//1. 添加全局方法
Vue.myGlobalMethod = function(){
//邏輯...
}
//2. 添加全局資源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//邏輯...
}
})
//3. 注入組件選項(xiàng)
Vue.mixin({
created:function(){
//邏輯...
}
})
//4. 添加實(shí)例方法
Vue.prototype.$myMethod = function(){
//邏輯
}
}
然后就在上面幾種創(chuàng)建插件的方法中根據(jù)需求寫一個(gè)插件。
需求：寫一個(gè)提示框當(dāng)點(diǎn)擊按鈕時(shí)給一個(gè)提示狀態(tài)膝宁，之后會(huì)自動(dòng)隱藏鸦难。
預(yù)覽：
本插件使用vue-cli3腳手架搭建：
將腳手架自動(dòng)生成的多余代碼去掉，在src中新建lib文件夾员淫，
然后在lib文件夾下創(chuàng)建 .vue .js .css文件。
//vue-leilei-toast
<template>
<div>
<transition name="fade">
<div v-show="show" class="toast">{{message}}</div>
</transition>
</div>
</template>
<script>
export default {
name: "leilei-toast",
components: {},
data() {
return {
message: "hello world",
show: false
};
},
computed: {},
watch: {},
methods: {
},
created() {},
mounted() {}
};
</script>
<style lang='scss'>
@import url("index.css");
</style>
//index.js
import Toast from './vue-leilei-toast.vue';
var ToastPlugin = {};
ToastPlugin.install = function(Vue,options){
var ToastConstructor = Vue.extend(Toast);
var ToastInstance = new (ToastConstructor);
var div = document.createElement('div');
ToastInstance.$mount(div);
document.body.appendChild(ToastInstance.$el);
Vue.prototype.$toast = function(msg,duration=2000){
ToastInstance.message = msg;
ToastInstance.show = true;
setTimeout(()=>{
ToastInstance.show = false
},duration)
}
}
export default ToastPlugin
/* css */
.toast{
position: fixed;
top: 50%;
left: 50%;
background: rgba(0,0,0,.5);
padding: 10px 40px;
border-radius: 8px;
color: #fff;
transform: translateX(-50%);
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
此時(shí)可以在本地測(cè)試一下。
在main.js中引入并使用
import toast from './lib/index.js';
Vue.use(toast);
在App.vue中測(cè)試使用
<template>
<div id="app">
<button @click="opentoast()">我是個(gè)按鈕</button>
</div>
</template>
<script>
export default {
methods:{
opentoast(){
this.$toast("hello world",1000)
}
}
}
</script>
點(diǎn)擊按鈕測(cè)試使用 em...沒問題关面。
二缩抡、打包組件
vue 打包組件相關(guān)配置文檔：構(gòu)建目標(biāo)-庫
在package.json中做相關(guān)配置
主要配置有四個(gè)參數(shù)：
- target:默認(rèn)為構(gòu)建應(yīng)用榴都，改為lib即可啟用構(gòu)建庫模式
- name:輸出文件名
- dist:輸出目錄春瞬，默認(rèn)為dist萄涯，可以修改我們改為lib
- entry:入口文件路徑燃逻，默認(rèn)為src/App.vue,我們修改為src/lib/index.js
//package.json
{
"scripts":{
"lib":"vue-cli-service build --target lib --name leilei-toast --dest lib src/lib/index.js"
}
}
接著運(yùn)行npm run lib命令打包組件
打包后的文件結(jié)構(gòu)圖
打包后控制臺(tái)輸出
然后在package.json中配置組件信息
name:包名，該名不能和npm上已有包重名，如何驗(yàn)證自己的包名是否會(huì)和npm上的包沖突？直接去npm上搜想定義的包名。
version：版本號(hào)，不能和歷史版本號(hào)相同挽荡。
description：簡介
main：入口文件
keyword：關(guān)鍵字株依，以空格分隔
author：作者
private：是否私有吗坚，需修改為false，否則發(fā)布失敗
license：開源協(xié)議
package.json配置如下
{
"name": "vue-mstian-toast", //給自己的包起一個(gè)響亮的名字 哈哈
"version": "0.1.0", //版本號(hào)這塊可以專門搜搜一些文章看看
"description": "vue-mstian-toast test", //描述
"main": "lib/leilei-toast.umd.min.js", //入口文件需要選擇能支持模塊化的文件具體可以查看打包后的文件后綴然后查閱相關(guān)資料
"keyword": "leilei vue toast test",
"author": "Mstian",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name leilei-toast --dest lib src/lib/index.js" //構(gòu)建庫的命令
},
}
三总寻、注冊(cè) 登錄npm賬號(hào)
如果已有npm賬號(hào)可以忽略這一步
https://www.npmjs.com/
官網(wǎng)注冊(cè)即可祟印。
登錄注冊(cè)成功后點(diǎn)擊右上角頭像下拉菜單有個(gè)Packages選項(xiàng)站蝠，當(dāng)然如果沒有上傳過npm包的時(shí)候當(dāng)然是0 packages.
四、發(fā)布
如果修改過npm的鏡像地址比如使用了淘寶鏡像，就先改回來稚失，
npm config set registry http://registry.npmjs.org
- cmd打開項(xiàng)目所在目錄句各，輸入登錄命令 npm login
- 根據(jù)提示信息輸入用戶名初厚，密碼亚情，郵箱站故。（注意：輸入密碼的時(shí)候命令面板不提示也沒有占位符，感覺好像沒有輸入東西一樣辜梳，其實(shí)已經(jīng)輸入了粱甫，接著輸入完整密碼下一步即可）
- 登陸成功后會(huì)有提示
Logged in as name on http://registry.npmjs.org，此時(shí)可以使用npm whoami查看當(dāng)前操作用戶
npm登陸成功 - 一切準(zhǔn)備就緒作瞄，準(zhǔn)備發(fā)包茶宵，
當(dāng)確認(rèn)項(xiàng)目已經(jīng)編譯成功（npm run lib成功）輸入npm publish。 - 不出意外這種操作是可以發(fā)布成功的宗挥。如果發(fā)布成功會(huì)在命令行顯示
+ 包名@版本號(hào)乌庶，然后注冊(cè)的郵箱也會(huì)受到一條郵件。 - 發(fā)布成功之后就可以去npm官網(wǎng)查看自己發(fā)布的包契耿，如果是第一次發(fā)包瞒大，那么Packages下會(huì)有一個(gè)包。
- 使用包
跟使用npm上的包流程一樣先安裝宵喂，再在main.js中引入糠赦，使用Vue.use()方法使用。之后就可以愉快的使用此插件啦锅棕。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import toast from './lib/index.js';
Vue.use(toast);
new Vue({
render: h => h(App)
}).$mount('#app')
在組件中使用
this.$toast("hello world",1000)拙泽。
五、 六裸燎、 刪除包
刪除近期上傳的包
npm unpublish --force //強(qiáng)制刪除顾瞻，npm會(huì)根據(jù)package.json的version刪除該version的包版本。這個(gè)是撤銷24小時(shí)發(fā)布的包德绿，有些包發(fā)布久了荷荤，這個(gè)方法不會(huì)再管用了退渗。
刪除存在線上比較久的包
npx force-unpublish package-name '原因描述' //是刪除已經(jīng)發(fā)布好的包
使用此方法刪除包之后，包還會(huì)存在Packages列表中蕴纳，不過點(diǎn)擊進(jìn)去會(huì)有提示会油。
如果刪除了包重新上傳之前的包的時(shí)候可能會(huì)失敗，這個(gè)時(shí)候改一下包名試試古毛。
七翻翩、更新迭代版本操作
在命令行輸入npm version patch命令改變版本號(hào)。然后再npm publish稻薇。
具體的版本號(hào)管理參考文章如何更新自己寫的npm包（模塊）嫂冻，假設(shè)已經(jīng)在npm中發(fā)布了一個(gè)1.0.0版本的包
八、下載安裝包使用時(shí)樣式丟失問題
通過查找資料發(fā)現(xiàn)有的說將.vue文件中的style標(biāo)簽中的scoped刪除掉就好了塞椎，可以試試桨仿，我也出現(xiàn)樣式丟失問題了，這么操作不好使案狠。
我默認(rèn)將css樣式寫在了.vue文件style標(biāo)簽里面服傍，然后樣式丟失，之后我又將樣式拿出來放在一個(gè).css文件里莺戒。然后在vue.config.js做了如下配置伴嗡。強(qiáng)制內(nèi)聯(lián)css。有人知道原因的話可以在評(píng)論區(qū)留言交流从铲。
module.exports = {
css:{
extract:false
}
}
這樣再打包上傳之后就有樣式了瘪校，具體原因不詳，官網(wǎng)有一段說明名段，沒咋理解阱扬。
The End
我寫的插件源碼：https://github.com/Mstian/vue-plugin
2020-04-30 23:42
最近在負(fù)責(zé)平臺(tái)公共組件的管理，將某些包抽象發(fā)布到npm伸辟，因?yàn)樾枰粩喔侣榛蹋詫?duì)版本號(hào)要經(jīng)常修改，特此記錄版本號(hào)有關(guān)內(nèi)容信夫。
語義版本號(hào)分為X.Y.Z三位窃蹋，分別代表主版本號(hào)、次版本號(hào)和補(bǔ)丁版本號(hào)静稻。當(dāng)代碼變更時(shí)警没，版本號(hào)按以下原則更新
- 如果只是修復(fù)bug，需要更新Z位振湾。
- 如果是新增了功能杀迹，但是向下兼容，需要更新Y位押搪。
- 如果有大變動(dòng)树酪，向下不兼容浅碾，需要更新X位。
參考：https://www.cnblogs.com/xd502djj/p/7985633.html
2020-11-18 15：28
感嘆時(shí)間過得真快呀续语，上次寫三月份總結(jié)的時(shí)候給自己定了幾個(gè)目標(biāo)垂谢，現(xiàn)在看一下，沒完成多少疮茄，哎真是哈哈（苦笑）埂陆。
四月份主要做了一些事情
1.上線博客第一版
2.學(xué)習(xí)鞏固js原生一些知識(shí)（比如閉包，原型娃豹，繼承，手寫bind等）
3.對(duì)vue更深入的學(xué)習(xí)了一些购裙。（本來大言不慚的說四月份學(xué)vue全家桶以及源碼呢）
4.一共在簡書發(fā)布十篇文章懂版，當(dāng)然都只是簡單的學(xué)習(xí)記錄，想要寫好文章得自己先有知識(shí)儲(chǔ)備躏率，還得花時(shí)間醞釀躯畴。
五月份計(jì)劃（不一定五月干，能想到還有一些需要做的事情）
1.深入學(xué)習(xí)vue全家桶（哈哈哈）
2.學(xué)習(xí)小程序薇芝。（將域名升級(jí)為https）
3.學(xué)習(xí)react蓬抄。
4.做一個(gè)自己的小程序（功能簡單，主要體驗(yàn)小程序流程）
5.使用react技術(shù)棧做一個(gè)移動(dòng)web版博客夯到，并解析一個(gè)m.的子域名并上線嚷缭。
6.學(xué)習(xí)一些云開發(fā)知識(shí)。
7.補(bǔ)充一些博客有趣的功能耍贾。（加一些必要的接口）
8.博客后臺(tái)管理系統(tǒng)阅爽。
五一假期到了，想到再補(bǔ)充吧荐开，好好休息付翁，好好學(xué)習(xí)。
2020-05-01 00:01
