自定义Vue组件打包、发布到npm及使用教程


Posted in Javascript onMay 22, 2019

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件。

本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习。

按照大佬文中写的一步步操作,够细心的话基本可以一步到位。下面总结一下发布步骤:

1. 利用Vue的脚手架新建一个简易版的Vue项目my-project:

vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev

2. 编写组件:

src下新建myPlugin文件夹用于存放所以开发的组件 -> 为每一个组件创建一个文件夹,其中存放一个vue组件文件和一个index.js配置文件 -> 在myPlugin下的最外层创建一个入口配置文件 -> 为每个人vue组件文件中加上一个name属性

3. 测试组件:

在app.vue中测试一下自己的组件可不可以用

4. 编写配置文件

为刚刚加入的每个组件文件夹中的index.js放入如下代码:(其中ldcPagination为组件名)

import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是开始说的vue文件暴露出来的name名,ldcPagination整个组件
export default ldcPagination;

为myPlugin下index.js放入如下代码:(其中ldcPagination为组件名,多个组件直接在components数组中加入并在最后输出出来就行)(引入的公共样式文件等都可以放这个文件中)

import ldcPagination from './Pagination/index.js';
const components = [
 ldcPagination
]
const install = function(Vue, opts = {}) {
 components.forEach(component => {
  Vue.component(component.name, component);
 });
}
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}
export default {
 install,
 ldcPagination
}

5. 改写webpack.config.js配置文件

将其中的输入输出换成如下代码:

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
//entry: './src/main.js',
//output: {
//  path: path.resolve(__dirname, './dist'),
//  publicPath: '/dist/',
//  filename: 'build.js'
// },
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',//路径
   filename: 'ldc-ui.js',//打包之后的名称
   library: 'ldc-ui', // 指定的就是你使用require时的模块名
   libraryTarget: 'umd', // 指定输出格式
   umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
...
}

6. 发布前准备

改写package.json中的private为false,加入"main": "dist/ldc-ui.js", 其他的自定义 -> 新建.npmignore文件忽略不需要上传的文件如.* *.md *.yml build/ node_modules/ src/ test/

7. 发布

npm run build 打包 -> 注册npm账号 -> npm login 登录 -> npm publish 发布

可能出现问题:

1. 登录源错误, npm config get registry 可查看当前登录源,npm config set registry=http://registry.npmjs.org 可切换到正确的登录源

2. 版本号不能重复

3. 图片资源打包后无法使用,所以自己的组件中不要使用

使用组件方式:

1. npm i xxx -D

2. import XXX from 'xxx'

3. const { A, B } = XXX

4. 在Vue中注册 components: { A, B }

总结

以上所述是小编给大家介绍的自定义Vue组件打包、发布到npm及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
Vue中的组件及路由使用实例代码详解
May 22 #Javascript
Vue侦测相关api的实现方法
May 22 #Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
微信小程序系列之自定义顶部导航功能
May 21 #Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 #Javascript
微信小程序websocket实现即时聊天功能
May 21 #Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
You might like
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Python加速程序运行的方法
2020/07/29 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
渡河少年教学反思
2014/02/12 职场文书
技能比赛获奖感言
2014/02/14 职场文书
工作决心书
2014/03/11 职场文书
演讲主持词
2014/03/18 职场文书
副总经理任命书
2014/06/05 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2014年人事部工作总结
2014/12/03 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
工会工作个人总结
2015/03/03 职场文书
Python中的pprint模块
2021/11/27 Python