首先放一张cli的目录结构图组件门路:src/components/组件文件夹/组件.vuesrc/components/组件文件夹/index.js代码
import comFullCalendarTimeline from "./fullCalendarTimeline.vue";comFullCalendarTimeline.install = (Vue) => Vue.component(comFullCalendarTimeline.name, comFullCalendarTimeline);export default comFullCalendarTimeline;目标:引入组件,install组件,抛出对外援用
多个组件状况:组件都引入在components数组中,在src目录下新建index.js
//引入组件import comFullCalendarTimeline from "./components/fullcalendar/index";//定义组件列表const components = [comFullCalendarTimeline];//定义方法const install = (Vue) => { //判断是否装置 // if (install.installed) { // return; // } // install.installed = true; //遍历注册组件 components.map((component) => Vue.component(component.name, component));};//检测Vueif (typeof window !== "undefined" && window.Vue) { install(window.Vue);}export default { install, ...components,};不论是哪个index.js在export胜利后,都能够在全局或者组件中进行import注册而后测试一下是否胜利。接着说打包配置:
package.js"name": "XXX", //npm名 "version": "1.9.0", //版本号 "private": false, //是否公有,上传公有包是须要付费的 "main": "./dist/fullcalendar.umd.js", //npm包的入口文件 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lib": "vue-cli-service build --target lib --name fullcalendar ./src/index.js", //这个是最次要的,指定组件打包命令 "lint": "vue-cli-service lint" }vue.config.jsconst path = require("path");const webpack = require("webpack");module.exports = { // devServer:{ // proxy:'http://192.168.61.22:8086' // }, // mode: 'development', // entry: './index.js', // output: { // path: path.resolve(__dirname, './dist'), // publicPath: '/dist/', // filename: 'index.js', // library: 'excel-upload', // libraryTarget: 'umd', // umdNamedDefine:true // }, css: { extract: false }, publicPath:'./', //根本门路 outputDir:"dist", //打包门路 // assetsDir:"chunk", pages:{ index:{ entry:'./src/main.js', //主入口文件 } }, // configureWebpack:(config) => { // config.externals = { // vue: "Vue", // "element-ui": "ELEMENT", // "vue-router": "VueRouter", // vuex: "Vuex", // axios: "axios" // }; // }, chainWebpack: (config) => { // 修复热更新生效 // config.resolve.symlinks(true); if (process.env.NODE_ENV === 'production') { config.entryPoints.clear(); config.entry("main").add("./src/index.js"); config.output .filename("fullcalendar.js")//输入文件名 .libraryTarget("umd")//输入格局 .library("comfullcalendar");//输入库 } // config.devServer.host("localhost"); config.plugin("provide").use(webpack.ProvidePlugin, [ { $: "jquery", jquery: "jquery", jQuery: "jquery", "window.jQuery": "jquery", }, ]); },};须要留神:
...