脚本宝典收集整理的这篇文章主要介绍了

仿探探卡片滑动vue封装并发布到npm

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

图片描述

项目初始化
使用 webpack-simple 方式比较方便和容易配置,原来的方式各种坑慎入

vue init webpack-simple vue-card-slide

cd  vue-card-slide

npm run dev

项目结构如下所示

仿探探卡片滑动vue封装并发布到npm-脚本宝典
更改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地址戳我

总结

以上是脚本宝典为你收集整理的

仿探探卡片滑动vue封装并发布到npm

全部内容,希望文章能够帮你解决

仿探探卡片滑动vue封装并发布到npm

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过