一 前言
當(dāng)我們項(xiàng)目中用到的表格太多的話，就會(huì)導(dǎo)致我們的代碼量一直增加，所以我們要封裝一個(gè)公共得組件，通過傳參引入來使用，下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下。
二 創(chuàng)建項(xiàng)目
npm init vite@latest
三 創(chuàng)建步驟
-
提示我們要安裝
create-vite@4.1.0得依賴，選擇y
-
起一個(gè)組件名字,然后我們選擇
vue
-
這里我選擇的是
javascript,然后回車
-
安裝完成
-
因?yàn)槲覀冃枰薳lement-ui組件庫，所以我們要手動(dòng)安裝一下依賴
npm install element-plus --save
四 創(chuàng)建組件
-
首先，我們要在
src目錄下，創(chuàng)建一個(gè)package文件夾，
-
在
package文件夾下創(chuàng)建.vue文件，（自定義名字）
-
封裝我們要得組件
這里面得內(nèi)容我就不過多講解了，有不懂的小伙伴可以問我。
<template> <section> <div class="common-table"> <el-table :data="tableData" stripe style="width: 100%" @selection-change="commonSelect"> <el-table-column type="selection" width="55" v-hasPermi="['anno:image:transmission']" v-if="deveops === true"> </el-table-column> <template v-for="column in column"> <el-table-column :width="column.width ? column.width : 'auto'" :prop="column.prop" :label="column.label"> <template #default="scope"> <slot v-if="column.imageId" :name="column.prop" :row="scope.row"> </slot> <template v-else-if="column.prop === 'imagePreview'"> <div class="overview"> <common-errimg :srcImg="scope.row.thumbUrl"/> </div> </template> <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:deletedevops'] && deletedevops"> <el-button v-for="(item, index) in buttons" :key="index" :type="item.type" @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent> {{ item.text }} </el-button> </template> <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:updatemark'] && updatemark"> <el-button v-for="(item, index) in buttons" :key="index" :type="item.type" @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent> {{ item.text }} </el-button> </template> </template> </el-table-column> </template> </el-table> </div> </section> </template> <script setup> const emit = defineEmits() const prop = defineProps({ name: 'common-table', tableData: { type: Array }, column: { type: Array }, buttons: { type: Array }, deveops: { type: Boolean }, deletedevops: { type: String }, updatemark: { type: String } }) // 表格多選 const commonSelect = (row) => { emit("commonRows", row) } </script> <style lang="scss" scoped> .overview { display: inline-block; } .overview img { max-width: 100px; height: auto; max-height: 60px; } </style> -
我們可以把我們創(chuàng)建的好的組件，找一個(gè)文件引入測(cè)試一下，確保我們的代碼沒有問題，這里我就不展示了。
五 導(dǎo)出組件
-
src根目錄中創(chuàng)建index.js文件，代碼如下：import commonTable from "./package/commonTable/commonTable.vue"; // 引入封裝好的組件 export { commonTable } //實(shí)現(xiàn)按需引入* const coms = [commonTable]; // 將來如果有其它組件,都可以寫到這個(gè)數(shù)組里 const components = [TestBtn]; const install = function(App, options) { components.forEach((component) => { App.component(component.name,component); }); }; export default { install } // 批量的引入* -
使用vite構(gòu)建
編輯vite.config.js文件,新增build屬性 vite中文文檔import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], build: { lib: { entry: path.resolve(__dirname, 'src/index.js'), name: 'commonTable', fileName: (format) => `common-table.${format}.js` }, rollupOptions: { // 確保外部化處理那些你不想打包進(jìn)庫的依賴 external: ['vue'], output: { // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量 globals: { vue: 'Vue' } } } } }) -
修改
package.json文件{ "name": "common-lyh", "private": true, "version": "0.0.1", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "files": ["dist"], "main": "./dist/test-btn.umd.js", "module": "./dist/test-btn.es.js", "exports": { ".": { "import": "./dist/test-btn.es.js", "require": "./dist/test-btn.umd.js" } }, "dependencies": { "vue": "^3.2.45" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "less": "^4.1.3", "sass": "^1.58.3", "vite": "^4.1.0" } }
六 打包
當(dāng)我們都配置好以后，我們就要打包了，這是我們要上傳得文件
-
打包，生成
dist文件npm run build
-
注冊(cè)
npm賬號(hào) 官網(wǎng)地址- 想要發(fā)布到
npm倉庫，就必須要有一個(gè)賬號(hào)，先去npm官網(wǎng)注冊(cè)一個(gè)賬號(hào)，注意記住用戶名、密碼和郵箱，發(fā)布的時(shí)候可能會(huì)用到 - 有些小伙伴可能本地的
npm鏡像源采用的是淘寶鏡像源或者其它的，如果想要發(fā)布npm包，我們得吧我們得npm源切換為官方得源，命令如下：npm config set registry=https://registry.npmjs.org
- 想要發(fā)布到
-
發(fā)布前準(zhǔn)備
在dist文件生成package.json文件，自定義組件名(唯一，重名報(bào)錯(cuò)重新起一個(gè)就行),版本號(hào)每次上傳要高于前一次版本號(hào)
在dist根目錄中運(yùn)行：npm init -y{ "name": "common-lyh", "version": "1.0.1", "description": "", "main": "common-table.es.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } -
添加
npm用戶
在dist目錄下，運(yùn)行命令npm adduser添加
npm賬號(hào)得用戶名和密碼還有郵箱地址-
Username用戶名 -
Password密碼 -
Email郵箱地址 -
Enter one-time password驗(yàn)證碼
-
-
執(zhí)行發(fā)布命令
npm publish出現(xiàn)如下就說明我們上傳成功了，然后我們到我們的
npm項(xiàng)目中查看結(jié)果
已經(jīng)上傳成功
七 使用組件
當(dāng)我們要在項(xiàng)目中使用的時(shí)候就復(fù)制npm i common-lyh
package.json文件中就有了我們安裝的組件
這個(gè)時(shí)候只要像element ui 那樣引入就可以全局使用了，在main.js中引入
在我們要用到得.vue中使用
文章來源：http://www.zghlxwxcb.cn/news/detail-432497.html
總結(jié)
到這里我們的組件就封裝并上傳好了，可以隨時(shí)通過npm下載并使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-432497.html
到了這里，關(guān)于vue3 + vite自定義封裝vue + element-ui 表格組件，發(fā)布到npm包的全過程。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
