本文將幫助:將自己寫的Vue組件打包到npm進行代碼托管,以及正常發佈之後如何使用自己的組件。 ...
本文將幫助:將自己寫的Vue組件打包到npm進行代碼托管,以及正常發佈之後如何使用自己的組件。
本文講述的僅僅是最基礎的實現,其他複雜的操作需要非常熟悉webpack的相關知識,作者將繼續學習。
先附上大佬的文獻:https://blog.csdn.net/qq_40513881/article/details/82494958
按照大佬文中寫的一步步操作,夠細心的話基本可以一步到位。下麵總結一下發佈步驟:
1. 利用Vue的腳手架新建一個簡易版的Vue項目my-project:
vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev
2. 編寫組件:
src下新建myPlugin文件夾用於存放所以開發的組件 -> 為每一個組件創建一個文件夾,其中存放一個vue組件文件和一個index.js配置文件 -> 在myPlugin下的最外層創建一個入口配置文件 -> 為每個人vue組件文件中加上一個name屬性
3. 測試組件:
在app.vue中測試一下自己的組件可不可以用
4. 編寫配置文件
為剛剛加入的每個組件文件夾中的index.js放入如下代碼:(其中ldcPagination為組件名)
import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是開始說的vue文件暴露出來的name名,ldcPagination整個組件
export default ldcPagination;
為myPlugin下index.js放入如下代碼:(其中ldcPagination為組件名,多個組件直接在components數組中加入併在最後輸出出來就行)(引入的公共樣式文件等都可以放這個文件中)
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. 發佈前準備
改寫package.json中的private為false,加入"main": "dist/ldc-ui.js", 其他的自定義 -> 新建.npmignore文件忽略不需要上傳的文件如.* *.md *.yml build/ node_modules/ src/ test/
7. 發佈
npm run build 打包 -> 註冊npm賬號 -> npm login 登錄 -> npm publish 發佈
可能出現問題:
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 }