文章使用示例代碼地址：FFFirer/vuedemo (github.com)
在文件夾 bootstrap-vue-component-demo 下
參考文章：vue自定義組件庫_coder tanrj的博客-CSDN博客
創建項目
這邊使用的 vue3 及對應的 vue-cli，選擇 vue3 默認項目模板
vue create <your-project-name>
創建好的目錄結構如下所示
參照 element-ui 的項目結構我們將src文件改名為 examples，這里放置一些控件的 demo 或者測試，新建一個 packages 文件夾這個文件夾主要存放為自定義控件的內容。
創建 vue.config.js，寫入如下配置
const path = require('path') const { config } = require('process') const resolve = dir => path.join(__dirname, dir) module.exports = { pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, chainWebpack: config => { config.module .rule('js') .include .add(resolve('packages')) .end() .use('babel') .loader('babel-loader') .tap(option => { return option }) } }
定義組件
在 packages 文件夾下新建一個組件，文件結構如下
在 packages/datePicker/src/datePicker.vue 中，編寫如下代碼，注意Vue2和Vue3的區別，Vue3使用defineComponent({})
Vue2版本
<template> <div>這是一個datePicker組件！</div> </template> <script> export default { name: "datePicker" }; </script> <style lang="scss"> </style>
Vue3版本
<template> <div>這是一個datePicker組件！</div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ name: "datePicker" }); </script>
在 packages/datePicker/index.js 中，編寫如下代碼
import datePicker from './src/datePicker.vue' datePicker.install = function (Vue) { Vue.component(datePicker.name, datePicker); } export default datePicker;
在 packages/index.js 中，注冊組件
import datePicker from './datePicker/index' const components = [ datePicker, ] // Vue2 // const install = function (Vue) { // components.forEach(component => { // Vue.component(component.name, component); // }); // } const install = function (Vue) { components.forEach(component => { Vue.component(component.name, component); }); } // Vue2 使用的Vue.component(..)注冊 // if (typeof window != 'undefined' && window.Vue) { // install(window.Vue); // } // Vue3 將組件都掛載到window上，
// 需要createApp({})之后手動調用app.use(...)，具體看下面示例 if (typeof window != 'undefined' && window.Vue) { window.b4Components = { install, datePicker, } } export { install, datePicker, }
本地測試
在 examples 文件中調用上門我們寫的自定義組件，看是否能正常調用
在 examples/main.js 中引入組件
import { createApp } from 'vue' import App from './App.vue' import { datePicker } from '../packages/index' var app = createApp(App).use(datePicker) app.config.productionTip = false app.mount('#app')
在頁面上直接使用
<template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> <date-picker></date-picker> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld } }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
查看效果
打包文件
在 package.json 中添加如下命令
"build-lib": "vue-cli-service build --target lib --name bootstrap-vue-component-demo --dest lib packages/index.js"
執行命令
npm run build-lib
打包好的文件結構
在瀏覽器直接引用打包后后的文件
注意，應該使用名字中帶umd的js文件，代表在瀏覽器和node環境中都可以調用。
頁面代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <meta charset="utf-8"> <title>bootstrap-vue-component-demo</title> <link rel="stylesheet" href="./b4Components.css"> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <date-picker></date-picker> </div> </body> </html> <script src="https://unpkg.com/vue@next"></script> <script src="./b4Components.umd.js"></script> <script> const app = Vue.createApp({ data: function () { return { demoDropdownList: [{ label: "test A", value: 1, href: "#" }, { label: "test B", value: 2, href: "#" } ] }; } }); app.use(b4Components); // 使用自定義的組件庫 app.mount("#app"); </script>
頁面效果
