vue 组件单独打包命令

参考地址:blog.csdn.net/adewrer/art…

自定义打包方式:

packages.json打包命令:

"scripts": {
 	...
    "lib:build": "vue-cli-service build --target lib --name ComponentName ./src/components/VueComponents/index.js",
    "lib:publish": "npm run lib:build && npm publish"
  },

--dest distName // 指定打包目录. 组件一般lib, 默认 dist

lib:build 打包

单个组件内/index.js

import Tree from './tree.vue'
// 为组件提供 install 安装方法，供按需引入
const Loading = {
    install: function (Vue) {
        Vue.component('Tree', Tree)
    }
}

export default Loading

整体组件/index.js 获取所有组件

// 打包配置
import Tree from './tree/index'
import Profile from './profile/index'
import Editor from './editor/index'
const Loading = {
    install: function (Vue) {
        //此处为全局引入
        Vue.use(Tree)
        Vue.use(Profile)
        Vue.use(Editor)
    }
}
export default Loading

上面是全部注册并引入vue 可以直接调用,如果我要单独使用注册呢?

参考后打包方式

目录结构:

|--packages    			//存放组件的根目录      
	|--cell				//cell单元格组件文件夹
		|--src    		 //单元格组件的模板文件夹
			|--cell.vue  //单元格组件
		|--index.js  	//单元格组件配置
	|--index.js  		//组件库配置

内部index.js

// 导入组件，组件必须声明 name
import cell from './src/cell.vue'
// 为组件提供 install 安装方法，供按需引入
cell.install = function (Vue) {
  Vue.component(cell.name, cell)
}
// 默认导出组件
export default cell

全局index.js，整合所有组件，暴露install安装方法和所有组件

// 导入颜色选择器组件
import cell from './cell'
import './../example/assets/iconfont.css'
// 存储组件列表
const components = [
    cell
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  cell
}

自动加载所有组件

当组件数量达到一定数量,人工添加全局index.js 显得比较繁琐,同时也容易遗漏,所以需要实现自动获取组件并注册

此时有几个要求(参考element-ui) 1 目录结构统一 2 组件名称此时需要使用,尽量按照一定规则定义