項目初始化
使用 webpack-simple 方式比較方便和容易配置，原來的方式各種坑慎入

vue init webpack-simple vue-card-slidecd vue-card-slidenpm 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地址戳我

總結

以上是生活随笔為你收集整理的仿探探卡片滑动vue封装并发布到npm的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。