1、设置打包入口

// 在项目中新建 lib.js 作为组件打包入口，假设放在根目录
import '........../index.scss'; // 各种需要的样式文件// 可能需要导出vuex的modules，以便在其他项目中引入const components = {Component1,Component2,
};// ops是 Vue.use时，设置的options
const install = function(Vue, opts = {}) {Object.keys(components).forEach(componentKey => {const component = components[componentKey];Vue.component(componentKey, component);});// 其他一些需要注册的内容
};
export default {install,...components
};

2、设置package.json

npm官网配置

1. "name": "lib-name", // 组件名
2. "main": "./lib/lib-name.umd.js", // 组件引入时，默认导出文件
3. "files": [ // 组件打包时，默认打包的文件，可以和.npmignore配合使用"lib/*","README.md","package.json"]
4. "scripts": {"lib": "vue-cli-service build --target lib --dest lib --name lib-name lib.js",}// --target lib   将项目中的任何组件以一个库的方式进行构建// --dest lib  指定输出目录// --name lib-name   打包后组件文件名// lib.js 打包入口文件地址

3、部署

方式1、发布到私有npm库（比如nexus等）

添加依赖 “lib-name”: “^版本号”,
设置lib-name依赖库地址：新建 .yarnrc文件，添加内容：

registry "依赖库地址"

方式2、将代码上传到代码仓库

npm install 地址格式
dependencies格式

添加依赖 “cim-lib”: “git+ssh://user@hostname:project.git#master”
使用npm或yarn安装
npm install git+ssh://user@hostname:project.git#master

vue打包成组件lib相关推荐

Vue 打包成桌面应用 vue打包成桌面应用 vue 打包桌面应用 vue 部署桌面应用 vue部署为桌面应用 vue部署为桌面应用 vue 桌面应用
文章目录使用到的工具 electron 第一步打包 dist 第二步创建配置文件 main.js package.json 第三步安装 Electron 第四步测试运行第五步安装 el ...
使用electron-buil将vue打包成exe并生成安装包
将vue进行打包 npm run build 安装electron-build和安装electron 在使用electron-build的时候必须安装electron 安装命令 npm i yarn ...
HBuilder将Vue打包成App遇到的问题以及解决方案
2019独角兽企业重金招聘Python工程师标准>>> 1.[ERROR] : 没有对应的路由页面解决:将路由的mode改为hash(由history改为hash) mode: ' ...
vue打包成app后，背景图片不显示
问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...
vue打包成app自动更新‘plus‘ is not defined报错
有人知道因为什么嘛?
ruoyi前后端分离vue打包部署发布
说明:打包使用的方式是把vue打包成dist文件后,放到若依的"ruoyi_admin"的静态文件模块下面,访问"http://localhost:9070/(端口&qu ...
NPM node vue打包笔记
1.设置淘宝的镜像 npm config set registry https://registry.npmmirror.com 2.查看是否配置成功 npm config get registry ...
npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...

vue打包成组件lib

目录

1、设置打包入口

2、设置package.json

3、部署

方式1、发布到私有npm库（比如nexus等）

方式2、将代码上传到代码仓库

vue打包成组件lib相关推荐

最新文章

热门文章