仿探探卡片滑动vue封装并发布到npm
项目初始化
使用 webpack-simple 方式比较方便和容易配置,原来的方式各种坑慎入
vue init webpack-simple vue-card-slide
cd vue-card-slide
npm run dev
项目结构如下所示
更改webpack.config.js配置
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '',
filename: 'vue-card-slide.js',
library: 'VueCardSlide',
libraryTarget: 'umd',
umdNamedDefine: true}
修改package.json
"name": "vue-card-slide",
"description": "A vue plugin for Carousel Card Slide",
"version": "1.1.1",
"author": "carrie ",
"license": "MIT",
"private": false,
"main": "dist/vue-card-slide.js",
"repository": {
"type": "git",
"url": "https://github.com/Carrie999/vue-card-slide/"
}
修改index.html
src="/dist/build.js" 改成 src="/dist/vue-card-slide.js"
封装打包好自己的插件 上传到相应git地址
npm 注册 npm login npm publish 就打包上传成功了
// ES6引入
import cardSlide from 'vue-card-slide'
// require引入
var cardSlide = require('CardSlide')
Vue.use(cardSlide)// 组件中使用
附上git地址戳我
原文地址:https://segmentfault.com/a/1190000014228861
仿探探卡片滑动vue封装并发布到npm的更多相关文章
- 将 Vue 组件库发布到 npm
制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...
- angular6组件封装以及发布到npm
一.创建angular项目 ng new myFirstDemo //angular-cli新建项目ng g m testm //新建模块ng g c testm/headertest //新建组件 ...
- vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
- 开发vue插件并发布到npm包管理工具的流程
1-10是开发流程,后面的是发布流程 1. 在Git里面…新建项目 2. 克隆项目到本地用来开发 git clone https://github.com/***/vue-prevent-brow ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- iOS:仿写探探App动画
一.简单介绍 探探动画比较新颖,这也是它在众多交友软件中火热的一个特色.实现这种动画的方式可以有两种方式实现: 1.使用转场动画实现 2.使用CollectionView自定义布局实现, 此处我提供 ...
- Smart3D系列教程2之 《为什么三维重建效果这么差?——探探那些被忽略的拍照要求和技巧》
一.照片采集的实用概念 根据照片进行三维重建的过程中,有人没怎么遇到坑,有人被坑的不轻.可能是模型的纹理失真,模型的法线错了,模型会生成我们各种也想不到的结果,那么,是什么导致三维重建效果这么差的?是 ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
随机推荐
- AngularJS入门学习
初识: {{}} 这种双层花括号的语法称之为:插值语法:也可以说是 标识符:AngularJS 主要就是使用这种方法进行数据绑定 ng-module="name" 在ng的 ...
- mac 下安装caffe(一)
1.brew install --build-from-source -vd boost boost-python 这一步出错:libtool: unrecognized option `-stati ...
- HDFS04
===================HDFS副本放置策略=================== 一个文件划分成多个block,每个 block存多份,如何为每个block选 择节点存储这几份数据? ...
- 浅析Netty原理
- 布局技巧1:创建可重用的UI组件(include标签)
Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个 ...
- ALSA声卡驱动中的DAPM详解之三:如何定义各种widget
上一节中,介绍了DAPM框架中几个重要的数据结构:snd_soc_dapm_widget,snd_soc_dapm_path,snd_soc_dapm_route.其中snd_soc_dapm_pat ...
- Luogu4198 楼房重建
https://zybuluo.com/ysner/note/1124880 题面 带修改的区间维护最大斜率. 题面 解析 用线段树区间维护斜率. 考虑如何向上合并. 左半段一定有贡献. 如果左半段的 ...
- java将JSON字符串转换为实体类对象,基于net.sf.json实现
@SuppressWarnings("unchecked") public static <T> T jsonToObject(String jsonString, C ...
- zabbix监控kafka消费
一.Kafka监控的几个指标 1.lag:多少消息没有消费 lag=logsize-offset 2.logsize:Kafka存的消息总数 3.offset:已经消费的消息 Kafka管理工具 介绍 ...
- 【XSY3209】RGB Sequence
题目 传送门 解法 用\(f_{i, j, k}\)表示有\(i\)个红石块, \(j\)个绿宝石块, \(k\)个钻石块 可以转移到\(f_{p+1, j, k}\). \(f_{i, p+1,k ...