主要是記錄體驗使用Vue CLI3自定義插件并發(fā)布到npm，然后在項目里下載使用的一個過程。
大綱
- 寫一個簡單的插件(寫插件注意事項)
- 打包庫的相關(guān)配置
- 注冊npm，登錄npm
- 發(fā)布流程
- 刪除已上傳包（短時間內(nèi)上傳的包）
- 刪除已上傳較長時間的包
npm unpublish --force //強制刪除，這個是撤銷24小時發(fā)布的包，有些包發(fā)布久了，這個方法不會再管用了。
npx force-unpublish package-name '原因描述' //是刪除已經(jīng)發(fā)布好的包
- 版本更新發(fā)布時操作。
- 發(fā)布成功下載使用時樣式丟失問題。
一、寫一個簡單的插件
官方文檔是這么說的：
Vue.js的插件應(yīng)該暴露一個install方法。這個方法的第一個參數(shù)是Vue構(gòu)造器，第二個參數(shù)是一個可選的選項對象。
MyPlugin.install = function(Vue){
//1. 添加全局方法
Vue.myGlobalMethod = function(){
//邏輯...
}
//2. 添加全局資源
Vue.directive('my-directive',{
bind(el,binding,vnode,oldVnode){
//邏輯...
}
})
//3. 注入組件選項
Vue.mixin({
created:function(){
//邏輯...
}
})
//4. 添加實例方法
Vue.prototype.$myMethod = function(){
//邏輯
}
}
然后就在上面幾種創(chuàng)建插件的方法中根據(jù)需求寫一個插件。
需求：寫一個提示框當(dāng)點擊按鈕時給一個提示狀態(tài)，之后會自動隱藏。
預(yù)覽：
本插件使用vue-cli3腳手架搭建：
將腳手架自動生成的多余代碼去掉，在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;
}
此時可以在本地測試一下。
在main.js中引入并使用
import toast from './lib/index.js';
Vue.use(toast);
在App.vue中測試使用
<template>
<div id="app">
<button @click="opentoast()">我是個按鈕</button>
</div>
</template>
<script>
export default {
methods:{
opentoast(){
this.$toast("hello world",1000)
}
}
}
</script>
點擊按鈕測試使用 em...沒問題。
二、打包組件
vue 打包組件相關(guān)配置文檔：構(gòu)建目標(biāo)-庫
在package.json中做相關(guān)配置
主要配置有四個參數(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"
}
}
接著運行npm run lib命令打包組件
打包后的文件結(jié)構(gòu)圖
打包后控制臺輸出
然后在package.json中配置組件信息
name:包名，該名不能和npm上已有包重名，如何驗證自己的包名是否會和npm上的包沖突？直接去npm上搜想定義的包名。
version：版本號，不能和歷史版本號相同。
description：簡介
main：入口文件
keyword：關(guān)鍵字，以空格分隔
author：作者
private：是否私有，需修改為false，否則發(fā)布失敗
license：開源協(xié)議
package.json配置如下
{
"name": "vue-mstian-toast", //給自己的包起一個響亮的名字 哈哈
"version": "0.1.0", //版本號這塊可以專門搜搜一些文章看看
"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)建庫的命令
},
}
三、注冊 登錄npm賬號
如果已有npm賬號可以忽略這一步
https://www.npmjs.com/
官網(wǎng)注冊即可。
登錄注冊成功后點擊右上角頭像下拉菜單有個Packages選項，當(dāng)然如果沒有上傳過npm包的時候當(dāng)然是0 packages.
四、發(fā)布
如果修改過npm的鏡像地址比如使用了淘寶鏡像，就先改回來，
npm config set registry http://registry.npmjs.org
- cmd打開項目所在目錄，輸入登錄命令 npm login
- 根據(jù)提示信息輸入用戶名，密碼，郵箱。（注意：輸入密碼的時候命令面板不提示也沒有占位符，感覺好像沒有輸入東西一樣，其實已經(jīng)輸入了，接著輸入完整密碼下一步即可）
- 登陸成功后會有提示
Logged in as name on http://registry.npmjs.org，此時可以使用npm whoami查看當(dāng)前操作用戶
npm登陸成功 - 一切準(zhǔn)備就緒，準(zhǔn)備發(fā)包，
當(dāng)確認(rèn)項目已經(jīng)編譯成功（npm run lib成功）輸入npm publish。 - 不出意外這種操作是可以發(fā)布成功的。如果發(fā)布成功會在命令行顯示
+ 包名@版本號，然后注冊的郵箱也會受到一條郵件。 - 發(fā)布成功之后就可以去npm官網(wǎng)查看自己發(fā)布的包，如果是第一次發(fā)包，那么Packages下會有一個包。
- 使用包
跟使用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 //強制刪除，npm會根據(jù)package.json的version刪除該version的包版本。這個是撤銷24小時發(fā)布的包，有些包發(fā)布久了，這個方法不會再管用了。
刪除存在線上比較久的包
npx force-unpublish package-name '原因描述' //是刪除已經(jīng)發(fā)布好的包
使用此方法刪除包之后，包還會存在Packages列表中，不過點擊進去會有提示。
如果刪除了包重新上傳之前的包的時候可能會失敗，這個時候改一下包名試試。
七、更新迭代版本操作
在命令行輸入npm version patch命令改變版本號。然后再npm publish。
具體的版本號管理參考文章如何更新自己寫的npm包（模塊），假設(shè)已經(jīng)在npm中發(fā)布了一個1.0.0版本的包
八、下載安裝包使用時樣式丟失問題
通過查找資料發(fā)現(xiàn)有的說將.vue文件中的style標(biāo)簽中的scoped刪除掉就好了，可以試試，我也出現(xiàn)樣式丟失問題了，這么操作不好使。
我默認(rèn)將css樣式寫在了.vue文件style標(biāo)簽里面，然后樣式丟失，之后我又將樣式拿出來放在一個.css文件里。然后在vue.config.js做了如下配置。強制內(nèi)聯(lián)css。有人知道原因的話可以在評論區(qū)留言交流。
module.exports = {
css:{
extract:false
}
}
這樣再打包上傳之后就有樣式了，具體原因不詳，官網(wǎng)有一段說明，沒咋理解。
The End
我寫的插件源碼：https://github.com/Mstian/vue-plugin
2020-04-30 23:42
最近在負(fù)責(zé)平臺公共組件的管理，將某些包抽象發(fā)布到npm，因為需要不斷更新，所以對版本號要經(jīng)常修改，特此記錄版本號有關(guān)內(nèi)容。
語義版本號分為X.Y.Z三位，分別代表主版本號、次版本號和補丁版本號。當(dāng)代碼變更時，版本號按以下原則更新
- 如果只是修復(fù)bug，需要更新Z位。
- 如果是新增了功能，但是向下兼容，需要更新Y位。
- 如果有大變動，向下不兼容，需要更新X位。
參考：https://www.cnblogs.com/xd502djj/p/7985633.html
2020-11-18 15：28
感嘆時間過得真快呀，上次寫三月份總結(jié)的時候給自己定了幾個目標(biāo)，現(xiàn)在看一下，沒完成多少，哎真是哈哈（苦笑）。
四月份主要做了一些事情
1.上線博客第一版
2.學(xué)習(xí)鞏固js原生一些知識（比如閉包，原型，繼承，手寫bind等）
3.對vue更深入的學(xué)習(xí)了一些。（本來大言不慚的說四月份學(xué)vue全家桶以及源碼呢）
4.一共在簡書發(fā)布十篇文章，當(dāng)然都只是簡單的學(xué)習(xí)記錄，想要寫好文章得自己先有知識儲備，還得花時間醞釀。
五月份計劃（不一定五月干，能想到還有一些需要做的事情）
1.深入學(xué)習(xí)vue全家桶（哈哈哈）
2.學(xué)習(xí)小程序。（將域名升級為https）
3.學(xué)習(xí)react。
4.做一個自己的小程序（功能簡單，主要體驗小程序流程）
5.使用react技術(shù)棧做一個移動web版博客，并解析一個m.的子域名并上線。
6.學(xué)習(xí)一些云開發(fā)知識。
7.補充一些博客有趣的功能。（加一些必要的接口）
8.博客后臺管理系統(tǒng)。
五一假期到了，想到再補充吧，好好休息，好好學(xué)習(xí)。
2020-05-01 00:01
