如何发布制作vue组件

smartlion 发布于2019-08-26 11:48 / 3294人阅读

摘要：引言如果你自己做了一个感觉还不错的组件，而想分享给别人或者发布到上，那该怎么办呢分享一个大神做的一个模板，这个模板集成了本地测试和打包发布，项目地址附上我的捂脸使用安装发布打包最后别人就可以这样使用你的组件了补

引言

如果你自己做了一个感觉还不错的vue组件，而想分享给别人或者发布到npm上，那该怎么办呢？

vue-share-components

分享一个大神做的一个 vue 模板，这个模板集成了本地测试和打包发布，项目地址 https://github.com/Akryum/vue...

附上我的 github https://github.com/Jon-Millent [捂脸]

使用安装

npm i -g vue-cli
vue init Akryum/vue-share-components your-component-name
npm install
npm run dev

发布

npm publish

打包

npm run build

最后别人就可以这样使用你的组件了

npm install your-component-name --save

import { Test } from "your-component-name"

补充

如果你的组件里有图片和其他资源，会打包出错，请按照下面步骤解决

安装两个loader

npm install url-loader --save
npm install file-loader --save

修改添加 /config/webpack.config.base.js 添加规则，下面是示例

rules: [
  {
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: "url-loader",
    options: {
      limit: 10000,
    }
  },
  {
    test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
    loader: "url-loader",
    options: {
      limit: 10000
    }
  }
]

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107597.html

如何设计高扩展的在线网页制作平台

摘要：如何设计高扩展的在线网页制作平台本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。市面上可使用的一些在线制作推广平台制作的页面又不能很好地结合到自己的业务流程里面。如何设计高扩展的在线网页制作平台本文主要介绍如何设计一个高扩展的在线网页制作平台，会交代一些背景和最终的效果以及核心设计方案。体验地址: https://godspen.ym...

dreamans 2019-08-26 10:42 评论0 收藏0
制作并发布第一个vue组件的npm包

摘要：发布到注册进入官网，注册帐号登录并发布提示报错是因为注册完后没有进行邮箱验证，验证完成即可发布成功参考文献如何制作并发布一个的组件的包发布自己第一个组件包基于的文字跑马灯组件最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于JQuery的，但是现在的项目是用vue写的。So...,就照葫芦画瓢改装成了Vue组件，总的来说算是...

bawn 2019-08-23 12:02 评论0 收藏0
少女风vue组件库制作全攻略~~

摘要：组件监听自定义事件。组件触发自定义事件。生命周期钩子函数，后组件的所有的事件监听器会被移除。技术点总结组件设计的思想包括单数据流事件中心，核心是组件通信。完善给弹出日期面板和关闭日期面板增加组件自定义事件即调用触发和事件。预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈，请勿在生产环境中使用，供学习&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0