android仿探探卡片 自动滑动,仿探探卡片滑动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)// 组件中使用