用vue封裝插件并發(fā)布到npm的方法步驟
一、基于vue的國家區(qū)號列表
vue-flag-list包含了大部分國家的區(qū)號，點擊右邊的三角形展開列表可以選擇國家區(qū)號，若列表中沒有區(qū)號，也可以自己輸入?yún)^(qū)號。
全球區(qū)號列表
1.1 初始化組件
用的是vue-cli來初始化組件，雖然有很多東西不需要，因為對這個比較熟悉，所以還是按照這個步驟來。
vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev
1.2 根據(jù)自己的需求，實現(xiàn)具體功能，我的主要功能寫在vue-flag-list.vue組件中。
<template>
<div id="flag">
...
</div>
</template>
<script>
export default {
name: 'vue-flag-list',
...
}
</script>
<style scoped>
...
</style>
功能寫好后，修改package.json等配置文件，為打包發(fā)布做準備
1.3 添加index.js
import flagComponent from './Vue-Flag-List.vue'
const VueFlagList = {
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component('VueFlagList', flagComponent)
}
}
export default VueFlagList
1.4 修改配置文件
1.4.1 package.json
{
"name": "vue-flag-list",
"version": "1.0.0",
"description": "A vue plugin for entering and selecting area code",
"author": "guimin",
// 因為組件包是公用的，所以private為false
"private": false,
// 配置main結(jié)點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑
"main": "dist/vue-flag-list.min.js",
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
// 指定代碼所在的倉庫地址
"repository": {
"type": "git",
"url": "git+https://github.com/linmoer/vue-flag-list.git"
},
// 指定打包之后，包中存在的文件夾
"files": [
"dist",
"src"
],
// 指定關(guān)鍵字
"keywords": [
"vue",
"flag",
"code",
"flag code"
],
"license": "MIT", //開源協(xié)議
// 項目官網(wǎng)的url
"homepage": "https://github.com/linmoer/vue-flag-list#readme",
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {
...
},
"engines": {...},
"browserslist": [...]
}
1.4.2 .gitignore 文件
因為要用dist文件夾，所以在.gitignore文件中把dist/去掉。
1.4.3 webpack.prod.conf.js 文件
為了支持多種使用場景，我們需要選擇合適的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環(huán)境執(zhí)行，AMD 只能在瀏覽器端執(zhí)行，UMD 同時支持兩種執(zhí)行環(huán)境。顯而易見，我們應(yīng)該選擇 UMD 格式。Webpack 中指定輸出格式的設(shè)置項為 output.libraryTarget，其支持的格式有：
- “var” - 以一個變量形式輸出： var Library = xxx (default)；
- “this” - 以 this 的一個屬性輸出： this[“Library”] = xxx；
- “commonjs” - 以 exports 的一個屬性輸出：exports[“Library”] = xxx；
- “commonjs2” - 以 module.exports 形式輸出：module.exports = xxx；
- “amd” - 以 AMD 格式輸出；
- “umd” - 同時以 AMD、CommonJS2 和全局屬性形式輸出。
以下是 webpack.prod.conf.js 中 output 設(shè)置的示例：
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'vue-flag-list.min.js',
library: 'VueFlagList',
libraryTarget: 'umd',
umdNamedDefine: true
},
Vue 是組件庫的外部依賴。組件庫的使用者會自行導(dǎo)入 Vue，打包的時候，不應(yīng)該將 Vue 打包進組件庫。但是，如果你將打包后的組件庫以 <script> 標簽形式直接引入，你會發(fā)現(xiàn)并不能正常執(zhí)行，提示 vue 未定義。
以 <script> 標簽形式使用組件時，會同樣使用 <script> 標簽導(dǎo)入 Vue。Vue 導(dǎo)入的變量是 “window.Vue” 而不是 “window.vue”，因此會出現(xiàn) vue 未定義的錯誤。
所以，我們需要在 webpack.prod.conf.js 中配置 externals，如下：
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
另外，為了將css打包成一個文件，所以需要將 webpack.prod.conf.js 中的plugins 選項的
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
修改為
new ExtractTextPlugin({
filename: 'vue-flag-list.min.css'
}),
修改入口文件
entry: {
app: './src/index.js'
},
1.5 整理一下目錄結(jié)構(gòu)，我的目錄結(jié)構(gòu)如下：
- vue-flag-list + build + dist - src + img index.js Vue-Flag-List.vue ...
二、用npm發(fā)布一個包
在發(fā)正式包之前可以在本地先打一個包，然后測試下有沒有問題，如果沒問題再發(fā)布到npm上。
2.1 打包到本地使用
npm build npm pack
npm pack 之后，就會在當(dāng)前目錄下生成 vue-flag-list-1.0.0.tgz 的文件。
打開一個新的vue項目，在當(dāng)前路徑下執(zhí)行('路徑' 表示文件所在的位置)
cnpm install 路徑/vue-flag-list-1.0.0.tgz
在新項目的入口文件（main.js）中引入
import VueFlagList from 'vue-flag-list' import 'vue-flag-list/dist/vue-flag-list.min.css' Vue.use(VueFlagList)
在組件中使用
<flagCode height="30" width="120" @getCode="getCode"></flagCode>
methos: {
getCode(code) {
console.log(code)
}
}
2.2 發(fā)布到npm
1、在 npm官網(wǎng) 注冊一個npm賬號
2、切換到需要發(fā)包的項目根目錄下，登錄npm賬號，輸入用戶名、密碼、郵箱
npm login
3、最后一步，執(zhí)行npm publish即可
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish # lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0
三、后記
折騰了很久，終于把vue-flag-list插件的雛形發(fā)布出去了，這是一個很簡單的插件，以后會繼續(xù)維護它，添加更多的實用功能。
- npm unpublish --force：移除一個發(fā)布包（也可以移除指定版本的包）
- npm logout：登出用戶
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue自定義插件封裝，實現(xiàn)簡易的elementUi的Message和MessageBox的示例
- vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
- 環(huán)形加載進度條封裝（Vue插件版和原生js版）
- Vue使用zTree插件封裝樹組件操作示例
- Vue插件從封裝到發(fā)布的完整步驟記錄
- Vue封裝的可編輯表格插件方法
- vue移動端微信授權(quán)登錄插件封裝的實例
- Vue二次封裝axios為插件使用詳解
- 第一個Vue插件從封裝到發(fā)布
- vue封裝第三方插件并發(fā)布到npm的方法
- bootstrap select插件封裝成Vue2.0組件
- vue3.0實現(xiàn)插件封裝
相關(guān)文章
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了JS框架之vue.js component組件的相關(guān)資料,本文通過實例詳解的方式給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
一文詳解VueUse中useAsyncState的實現(xiàn)原理
在Vue 3 Composition API中,我們可以使用自定義鉤子函數(shù)來封裝可復(fù)用的邏輯,useAsyncState是一個用于管理異步狀態(tài)的自定義鉤子函數(shù),本文將給大家介紹一下useAsyncState的實現(xiàn)原理,感興趣的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了vue項目實現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式，方式一是通過監(jiān)聽事件實現(xiàn)方式二是通過 v-model 實現(xiàn)，每種方式結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-11-11
Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個數(shù)組來存儲表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個對象,對象的屬性對應(yīng)表格的列,這篇文章主要介紹了Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解,需要的朋友可以參考下2024-05-05
全局指令是Vue.js中的一種自定義指令,可以在整個應(yīng)用中重復(fù)使用,通過Vue.directive方法定義,可以在組件內(nèi)部直接使用,指令有多個生命周期鉤子,可以接收參數(shù)和修飾符,提高代碼復(fù)用性和可維護性,本文介紹vue全局指令文件directives,感興趣的朋友一起看看吧2025-02-02
Vue.js 的內(nèi)聯(lián)表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。這篇文章我們將一起學(xué)習(xí)vue.js的計算屬性。什么是計算屬性，為什么要用這東西呢？通過下面這篇文章你將解決這些問題，下面來一起看看吧。2016-09-09
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的相關(guān)資料,這樣的配置能夠有效避免瀏覽器緩存問題,確保瀏覽器每次都能加載最新的代碼,同時又不影響第三方庫的緩存效果,需要的朋友可以參考下2024-11-11