仿探探卡片滑动vue封装并发布到npm
2023-09-27 14:26:44 时间
项目初始化
使用 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地址戳我
相关文章
- vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
- vue组件之间互相传值
- vue双向数据流
- MyBatisPlus 最新版代码生成器(直接拿来就能用,包含自动生成 Vue 模版)
- vue router编程式导航
- 在CSS中使用JS变量Vue项目
- Vue&Cesium&Ribbon界面: 将桌面GIS搬进浏览器
- petite-vue源码剖析-优化手段template详解
- Win10:SpringBoot+Vue+Nginx前后端分离
- 从零写一个类似Vue的Mvvm框架 01
- vue-ivew input 框 回车搜索功能
- 懒人必备:使用vue ui创建vue项目
- vue封装组件,类似elementUI组件库打包发布到npm上
- vue SEO的解决方案