本文將幫助：將自己寫的Vue組件打包到npm進行代碼托管，以及正常發(fā)布之后如何使用自己的組件。

成都創(chuàng)新互聯(lián)是一家從事企業(yè)網站建設、網站制作、成都網站制作、行業(yè)門戶網站建設、網頁設計制作的專業(yè)網絡公司，擁有經驗豐富的網站建設工程師和網頁設計人員，具備各種規(guī)模與類型網站建設的實力，在網站建設領域樹立了自己獨特的設計風格。自公司成立以來曾獨立設計制作的站點近千家。

本文講述的僅僅是最基礎的實現(xiàn)，其他復雜的操作需要非常熟悉webpack的相關知識，作者將繼續(xù)學習。

按照大佬文中寫的一步步操作，夠細心的話基本可以一步到位。下面總結一下發(fā)布步驟：

1. 利用Vue的腳手架新建一個簡易版的Vue項目my-project：

vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev

2. 編寫組件：

src下新建myPlugin文件夾用于存放所以開發(fā)的組件 -> 為每一個組件創(chuàng)建一個文件夾，其中存放一個vue組件文件和一個index.js配置文件 -> 在myPlugin下的最外層創(chuàng)建一個入口配置文件 -> 為每個人vue組件文件中加上一個name屬性

3. 測試組件：

在app.vue中測試一下自己的組件可不可以用

4. 編寫配置文件

為剛剛加入的每個組件文件夾中的index.js放入如下代碼：（其中l(wèi)dcPagination為組件名）

import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是開始說的vue文件暴露出來的name名，ldcPagination整個組件
export default ldcPagination;

為myPlugin下index.js放入如下代碼：（其中l(wèi)dcPagination為組件名，多個組件直接在components數(shù)組中加入并在最后輸出出來就行）（引入的公共樣式文件等都可以放這個文件中）

import ldcPagination from './Pagination/index.js';
const components = [
 ldcPagination
]
const install = function(Vue, opts = {}) {
 components.forEach(component => {
  Vue.component(component.name, component);
 });
}
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}
export default {
 install,
 ldcPagination
}

5. 改寫webpack.config.js配置文件

將其中的輸入輸出換成如下代碼：

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
//entry: './src/main.js',
//output: {
//  path: path.resolve(__dirname, './dist'),
//  publicPath: '/dist/',
//  filename: 'build.js'
// },
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',//路徑
   filename: 'ldc-ui.js',//打包之后的名稱
   library: 'ldc-ui', // 指定的就是你使用require時的模塊名
   libraryTarget: 'umd', // 指定輸出格式
   umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define
  },
...
}

6. 發(fā)布前準備

改寫package.json中的private為false，加入"main": "dist/ldc-ui.js", 其他的自定義 -> 新建.npmignore文件忽略不需要上傳的文件如.* *.md *.yml build/ node_modules/ src/ test/

7. 發(fā)布

npm run build 打包 -> 注冊npm賬號 -> npm login 登錄 -> npm publish 發(fā)布

　　可能出現(xiàn)問題：

1. 登錄源錯誤， npm config get registry 可查看當前登錄源，npm config set registry=http://registry.npmjs.org 可切換到正確的登錄源

2. 版本號不能重復

3. 圖片資源打包后無法使用，所以自己的組件中不要使用

使用組件方式：

1. npm i xxx -D

2. import XXX from 'xxx'

3. const { A, B } = XXX

4. 在Vue中注冊 components: { A, B }

總結

以上所述是小編給大家介紹的自定義Vue組件打包、發(fā)布到npm及使用教程,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！