如何發(fā)布制作vue組件

smartlion 發(fā)布于2019-08-26 11:48 / 3291人閱讀

摘要：引言如果你自己做了一個感覺還不錯的組件，而想分享給別人或者發(fā)布到上，那該怎么辦呢分享一個大神做的一個模板，這個模板集成了本地測試和打包發(fā)布，項目地址附上我的捂臉使用安裝發(fā)布打包最后別人就可以這樣使用你的組件了補

引言

如果你自己做了一個感覺還不錯的vue組件，而想分享給別人或者發(fā)布到npm上，那該怎么辦呢？

vue-share-components

分享一個大神做的一個 vue 模板，這個模板集成了本地測試和打包發(fā)布，項目地址 https://github.com/Akryum/vue...

附上我的 github https://github.com/Jon-Millent [捂臉]

使用安裝

npm i -g vue-cli
vue init Akryum/vue-share-components your-component-name
npm install
npm run dev

發(fā)布

npm publish

打包

npm run build

最后別人就可以這樣使用你的組件了

npm install your-component-name --save

import { Test } from "your-component-name"

補充

如果你的組件里有圖片和其他資源，會打包出錯，請按照下面步驟解決

安裝兩個loader

npm install url-loader --save
npm install file-loader --save

修改添加 /config/webpack.config.base.js 添加規(guī)則，下面是示例

rules: [
  {
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: "url-loader",
    options: {
      limit: 10000,
    }
  },
  {
    test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
    loader: "url-loader",
    options: {
      limit: 10000
    }
  }
]

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107597.html

相關(guān)文章

如何設(shè)計高擴展的在線網(wǎng)頁制作平臺

摘要：如何設(shè)計高擴展的在線網(wǎng)頁制作平臺本文主要介紹如何設(shè)計一個高擴展的在線網(wǎng)頁制作平臺，會交代一些背景和最終的效果以及核心設(shè)計方案。市面上可使用的一些在線制作推廣平臺制作的頁面又不能很好地結(jié)合到自己的業(yè)務(wù)流程里面。如何設(shè)計高擴展的在線網(wǎng)頁制作平臺本文主要介紹如何設(shè)計一個高擴展的在線網(wǎng)頁制作平臺，會交代一些背景和最終的效果以及核心設(shè)計方案。體驗地址: https://godspen.ym...

dreamans 2019-08-26 10:42 評論0 收藏0
制作并發(fā)布第一個vue組件的npm包

摘要：發(fā)布到注冊進(jìn)入官網(wǎng)，注冊帳號登錄并發(fā)布提示報錯是因為注冊完后沒有進(jìn)行郵箱驗證，驗證完成即可發(fā)布成功參考文獻(xiàn)如何制作并發(fā)布一個的組件的包發(fā)布自己第一個組件包基于的文字跑馬燈組件最近在網(wǎng)上找到一個網(wǎng)頁制作輔助工具-jQuery標(biāo)尺參考線插件，覺得在現(xiàn)在的一個項目中能用的上，插件是基于JQuery的，但是現(xiàn)在的項目是用vue寫的。So...,就照葫蘆畫瓢改裝成了Vue組件，總的來說算是...

bawn 2019-08-23 12:02 評論0 收藏0
少女風(fēng)vue組件庫制作全攻略~~

摘要：組件監(jiān)聽自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽器會被移除。技術(shù)點總結(jié)組件設(shè)計的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。預(yù)覽組件庫官網(wǎng) github地址如果喜歡各位小哥哥小姐姐給個小星星鼓勵一下哈，請勿在生產(chǎn)環(huán)境中使用，供學(xué)習(xí)&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 評論0 收藏0
2017年2月份前端資源分享

平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉(zhuǎn)換...

lily_wang 2019-06-27 16:28 評論0 收藏0