第一個Vue插件從封裝到發(fā)布
更新時間：2017年11月22日 09:04:17 作者：Shapeying
這篇文章主要為大家詳細介紹了第一個Vue插件從封裝到發(fā)布的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
這是我封裝的第一個Vue插件，實現的功能是滑動選擇省市區(qū)，雖然只是一個簡單的插件，但還是挺開心的，記錄一下步驟。
插件地址：https://github.com/leichangchun/vue-area-select 歡迎指正
準備
Vue官網插件部分的介紹雖然很簡單，但是還是好好刷一遍的。由于此插件較為簡單，主要用到以下兩個點：
1 . Vue的插件需要有一個公開方法install
2 . 通過全局方法 Vue.use() 使用插件，在下文有栗子
創(chuàng)建工程
初始化工程
vue init webpack-simple projectName cd projectName cnpm install //安裝依賴
創(chuàng)建開發(fā)組件目錄如下
開發(fā)插件
插件入口index.js需要引入插件組件，寫install方法
import vueAreaSelect from './components/vue-area-select' //引入組件
const areaSelect = {
install (Vue, options) {
Vue.component(vueAreaSelect.name, vueAreaSelect) //全局組件
}
}
export default areaSelect //導出
vue-area-select.vue是插件的具體實現部分，就不過多介紹，詳見源碼。
調試時的引用方式是引入index.js文件
//引入 import areaSelect from './index.js' Vue.use(areaSelect) //.vue中 使用 <vue-area-select></vue-area-select>
調試完成后，需要build，然后再npm發(fā)布。build的時候需要先修改webpack.config.js中的配置，然后 npm run build 打包文件
// entry: './src/main.js', //npm run dev時 demo調試的入口
entry: './src/index.js', //打包時 插件入口
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: 'vue-area-select-lei.js', //打包生成文件的名字
library:'AreaSelect', //reqire引入的名字
libraryTarget:'umd',
umdNamedDefine:true
}
此時，插件開發(fā)部分已經完成。之后就需要npm發(fā)布。
NPM發(fā)布
先配置package.json,需要加入以下幾項
"private": false,
"main": "dist/vue-area-select-lei.js", //import引入時默認尋找的文件
"repository": { //倉庫地址
"type": "git",
"url": "https://github.com/leichangchun/vue-area-select"
},
然后npm login 登錄賬號 npm publish發(fā)布插件
插件的方式使用
npm install vue-area-select-lei --save //安裝 //插件的方式引入使用 import areaSelect from 'vue-area-select-lei' Vue.use(areaSelect)
效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue3中ref獲取子組件值的相關資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實現,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章給大家介紹了vue實現表格動態(tài)嵌入折線圖的繪制方法,文中有詳細完整的代碼示例攻大家參考,對大家的學習或工作有一定的參考價值,需要的朋友可以參考下2023-10-10
Vue+Element一步步實現動態(tài)添加Input_輸入框案例
這篇文章主要介紹了Vue+Element一步步實現動態(tài)添加Input_輸入框案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2中,根據list的id進入對應的詳情頁并修改title方法
今天小編就為大家分享一篇vue2中,根據list的id進入對應的詳情頁并修改title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結,本文結合示例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了在vue項目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
隨著前端工程化的應用越來越廣，插件和包的管理也逐漸衍生出很多的管理器，常見的幾種包管理器如：npm、cnpm、yarn、pnpm，那你知道這些管理器之間有哪些區(qū)別嗎？我們一起來逐個認識下它們2023-04-04
這篇文章主要介紹了element?實現導航欄收起展開功能，實現思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下2023-01-01