最終效果如下
一、先創(chuàng)建vue2項目
1、 可以用vue-cli自己來創(chuàng)建；也可以直接使用我開源常規(guī)的vue2后臺管理系統(tǒng)模板
以下我以 wocwin-admin-vue2 項目為例
修改目錄結(jié)構(gòu)，最終如下
2、修改vue.config.js文件
module.exports = {
// 修改 src 目錄 為 examples 目錄
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 強制內(nèi)聯(lián)CSS（使用組件時，不需要再引入css）
css: {
extract: false
},
// 別名
configureWebpack: config => {
config.resolve.alias['@'] = resolve('examples')
config.resolve.alias['components'] = resolve('examples/components')
config.resolve.alias['~'] = resolve('packages')
// 生產(chǎn)環(huán)境配置
if (isProduction) {
config.mode = 'production'
// 打包文件大小配置
config.performance = {
maxEntrypointSize: 10000000,
maxAssetSize: 30000000
}
}
}
}
二、組件開發(fā)
1、首先需要創(chuàng)建一個 packages 目錄，用來存放組件
2、需要注意的是，組件必須聲明 name，這個 name 就是組件的標簽
3、這里以組件 TTable 為例，完整的 packages/table 目錄結(jié)構(gòu)如下：
4、每個組件都應(yīng)該歸類于單獨的目錄下，包含其組件源碼目錄 src，和 index.js 便于外部引用
import TTable from './src'
TTable.install = function (Vue) {
Vue.component(TTable.name, TTable)
}
export default TTable
5、packages 目錄下存放每個組件單獨的開發(fā)目錄，和一個 index.js 整合所有組件，并對外導(dǎo)出
1、導(dǎo)入組件，組件必須聲明 name
import TAntConfigform from './config-form'
import TAntLayoutConditional from './layout-conditional'
import TLayoutPage from './layout-page'
import TLayoutPageItem from './layout-page-item'
import TAntLayoutTable from './layout-table'
import TAntRangePicker from './range-picker'
import TCalendar from './calendar'
import TDatePicker from './date-picker'
import TDialog from './dialog'
import TEditTable from './edit-table'
import TComplexEditTable from './complex-edit-table'
import TForm from './form'
import TIcon from './icon'
import TInput from './input'
import TInputSearch from './input-search'
import TLayout from './layout'
import TPhone from './phone'
import TProtocol from './protocol'
import TQueryCondition from './query-condition'
import TSearch from './search'
import TStepWizard from './step-wizard'
import TSticky from './sticky'
import TTable from './table'
import TTimerBtn from './timer-btn'
import TTreeTable from './tree-table'
import TUploadFile from './upload-file'
import UploadFile from './UploadFile'
import TAntLayoutForm from './layout-form'
import TModuleForm from './module-form'
import TBtnDate from './btn-date'
import TSelect from './select'
import TPaginationSelect from './pagination-select'
import TDetail from './detail'
import { TAntModal, TAntProtocol } from './modal'
import TSelectTable from './select-table'
import TTreeSelect from './tree-select'
import TButton from './button'
import { version } from '../package.json'
// 存儲組件列表
const components = [
TAntConfigform,
TAntLayoutConditional,
TLayoutPage,
TLayoutPageItem,
TAntLayoutTable,
TAntRangePicker,
TCalendar,
TDialog,
TDatePicker,
TForm,
TIcon,
TInput,
TInputSearch,
TLayout,
TPhone,
TProtocol,
TQueryCondition,
TSearch,
TStepWizard,
TSticky,
TTable,
TTimerBtn,
TTreeTable,
TUploadFile,
UploadFile,
TAntLayoutForm,
TAntModal,
TAntProtocol,
TModuleForm,
TComplexEditTable,
TEditTable,
TBtnDate,
TSelect,
TPaginationSelect,
TDetail,
TSelectTable,
TButton,
TTreeSelect
]
2、定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function (Vue) {
// 判斷是否安裝
if (install.installed) return
install.installed = true
// 遍歷注冊全局組件
components.map(component => Vue.component(component.name, component))
}
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
3、導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝（全局使用）
export default {
version,
// 導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝
install
}
4、按需引入
export {
TAntConfigform,
TAntLayoutConditional,
TLayoutPage,
TLayoutPageItem,
TAntLayoutTable,
TAntRangePicker,
TCalendar,
TDialog,
TDatePicker,
TForm,
TIcon,
TInput,
TInputSearch,
TLayout,
TPhone,
TProtocol,
TQueryCondition,
TSearch,
TStepWizard,
TSticky,
TTable,
TTimerBtn,
TTreeTable,
TUploadFile,
UploadFile,
TAntLayoutForm,
TAntModal,
TAntProtocol,
TModuleForm,
TComplexEditTable,
TEditTable,
TBtnDate,
TSelect,
TPaginationSelect,
TDetail,
TSelectTable,
TButton,
TTreeSelect
}
5、packages/index.js完整代碼
import TAntConfigform from './config-form'
import TAntLayoutConditional from './layout-conditional'
import TLayoutPage from './layout-page'
import TLayoutPageItem from './layout-page-item'
import TAntLayoutTable from './layout-table'
import TAntRangePicker from './range-picker'
import TCalendar from './calendar'
import TDatePicker from './date-picker'
import TDialog from './dialog'
import TEditTable from './edit-table'
import TComplexEditTable from './complex-edit-table'
import TForm from './form'
import TIcon from './icon'
import TInput from './input'
import TInputSearch from './input-search'
import TLayout from './layout'
import TPhone from './phone'
import TProtocol from './protocol'
import TQueryCondition from './query-condition'
import TSearch from './search'
// import TSimpleForm from './simple-form'
import TStepWizard from './step-wizard'
import TSticky from './sticky'
import TTable from './table'
import TTimerBtn from './timer-btn'
import TTreeTable from './tree-table'
// import TUploadExcel from './upload-excel'
import TUploadFile from './upload-file'
import UploadFile from './UploadFile'
import TAntLayoutForm from './layout-form'
import TModuleForm from './module-form'
import TBtnDate from './btn-date'
import TSelect from './select'
import TPaginationSelect from './pagination-select'
import TDetail from './detail'
import { TAntModal, TAntProtocol } from './modal'
import TSelectTable from './select-table'
import TTreeSelect from './tree-select'
import TButton from './button'
// import TTheme from './theme'
import { version } from '../package.json'
// 存儲組件列表
const components = [
TAntConfigform,
TAntLayoutConditional,
TLayoutPage,
TLayoutPageItem,
TAntLayoutTable,
TAntRangePicker,
TCalendar,
TDialog,
TDatePicker,
TForm,
TIcon,
TInput,
TInputSearch,
TLayout,
TPhone,
TProtocol,
TQueryCondition,
TSearch,
// TSimpleForm,
TStepWizard,
TSticky,
TTable,
TTimerBtn,
TTreeTable,
// TUploadExcel,
TUploadFile,
UploadFile,
TAntLayoutForm,
TAntModal,
TAntProtocol,
TModuleForm,
TComplexEditTable,
TEditTable,
TBtnDate,
TSelect,
TPaginationSelect,
TDetail,
TSelectTable,
TButton,
TTreeSelect
// TTheme
]
// 定義 install 方法，接收 Vue 作為參數(shù)。如果使用 use 注冊插件，則所有的組件都將被注冊
const install = function (Vue) {
// 判斷是否安裝
if (install.installed) return
install.installed = true
// 遍歷注冊全局組件
components.map(component => Vue.component(component.name, component))
}
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
// 按需引入
export {
TAntConfigform,
TAntLayoutConditional,
TLayoutPage,
TLayoutPageItem,
TAntLayoutTable,
TAntRangePicker,
TCalendar,
TDialog,
TDatePicker,
TForm,
TIcon,
TInput,
TInputSearch,
TLayout,
TPhone,
TProtocol,
TQueryCondition,
TSearch,
// TSimpleForm,
TStepWizard,
TSticky,
TTable,
TTimerBtn,
TTreeTable,
// TUploadExcel,
TUploadFile,
UploadFile,
TAntLayoutForm,
TAntModal,
TAntProtocol,
TModuleForm,
TComplexEditTable,
TEditTable,
TBtnDate,
TSelect,
TPaginationSelect,
TDetail,
TSelectTable,
TButton,
TTreeSelect
// TTheme
}
export default {
version,
// 導(dǎo)出的對象必須具有 install，才能被 Vue.use() 方法安裝
install
}
三、修改package.json文件
1、package.json 文件里面有很多字段要填寫，否則不能正確發(fā)布。最重要的是以下幾個：
- name: 包名，該名字是唯一的?？稍?npm 官網(wǎng)搜索名字，如果存在則需換個名字。
- version: 版本號，不能和歷史版本號相同。
- main: 入口文件，默認為 index.js，這里改為 lib/t-ui-plus.umd.cjs。
- module: 模塊入口，這里改為 lib/t-ui.umd.min.js。
- private:false
- repository----倉庫地址
- homepage----組件文檔或demo示例
- keywords-----關(guān)鍵字（便于搜索）
2、在package.json 文件scripts里面新增一條lib打包命令：
Vue CLI 中提供了構(gòu)建庫的方法，你可以通過下面的命令將一個單獨的入口構(gòu)建為一個庫：
vue-cli-service build --target lib --name myLib [entry]target: 改為 lib 可啟用構(gòu)建庫模式應(yīng)用模式
name: 構(gòu)建庫輸出的文件名；
dest: 構(gòu)建的輸出目錄，默認為 dist；
entry: 打包入口文件路徑；
"scripts": {
"lib": "vue-cli-service build --target lib --name t-ui --dest lib packages/index.js",
}
四、發(fā)布到npm
1、先查看 npm 的 registry
npm config get registry
2、設(shè)置 npm 的 registry 為官方源
npm config set registry https://registry.npmjs.org
3、執(zhí)行命令 npm login 登錄到 npm
4、執(zhí)行命令 npm publish 發(fā)布到 npm
如出現(xiàn)以下信息，則證明包發(fā)布成功:
5、注：上傳的 npm 包，在 72小時 后不可刪除，如果是測試用的包，記得 72小時 內(nèi)刪除。
五、安裝使用
// 先安裝
npm i @wocwin/t-ui
// 1、 在main.js中按下引入(全局使用)
import Tui from '@wocwin/t-ui'
Vue.use(Tui)
// 2、按需引入，在單個vue文件如下引入，在注冊；或者在main.js中如下引入在注冊，皆可！
import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'
源碼地址
gitHub組件地址
gitee碼云組件地址
相關(guān)文章
基于ElementUi&Antd再次封裝基礎(chǔ)組件文檔
vue3+ts基于Element-plus再次封裝基礎(chǔ)組件文檔文章來源：http://www.zghlxwxcb.cn/news/detail-476732.html
vite+vue3+ts項目搭建之集成qiankun文章來源地址http://www.zghlxwxcb.cn/news/detail-476732.html
到了這里，關(guān)于Vue2自己封裝的基礎(chǔ)組件庫或基于Element-ui再次封裝的基礎(chǔ)組件庫，如何發(fā)布到npm并使用（支持全局或按需引入使用），超詳細的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
