vue 封装 轮播组件 并发布到 npm 上

一、封装轮播组件

1. 首先来捋一下大概的思路

  • 组成部分大概有: 最外层盒子包裹, 需要轮播的部分, 指示器 和 左右两边的方向指示器
  • 需要设置的属性以及默认值:
    Property Deacription type default
    autoplay 是否开启自动播放 Boolean true
    duration 滑动间隔时长 Number 3000
    instial 默认显示第几项(下标) Number 0
    hasDot 是否显示指示器 Boolean true
    hasDirector 是否显示方向指示器 Boolean true
    dotBgColor 指示器背景色 String #ff5000
    dirBgColor 方向指示器颜色 String #fff

2. 创建项目以及对应文件

  • 首选创建一个最简化的 vue2.0 项目, 项目创建这边就不进行细述了
  • 项目创建完成, 在 src 目录下创建目录以及文件, index.js文件时入口文件, Carousel 目录中存放的则是轮播图的各个模块
    image.png

3. 进行代码编写 (整个编写流程, 这边不太好讲解, 所以只能把对应文件的 所有代码贴出)

  • 编写最外层盒子, 在 Carousel 目录下新建 index.vue 文件





  • 编写需要轮播的选项, 在 Carousel 目录下新建 Item.vue 文件





  • 在入口文件 index.js 中注册
import Vue from 'vue';
import Carousel from './Carousel/index.vue';
import CarIterm from './Carousel/Item.vue';


let JscyUI = {}


// 全局注册组件
JscyUI.install = ((Vue) => {

   // Vue.component('组件name', 组件本身)
  Vue.component(Carousel.name, Carousel);

  Vue.component(CarIterm.name, CarIterm)

})



// 将组件暴露
export default JscyUI;

4. 这边可以先对写好的组件, 进行简单的使用

  • main.js 中引入
    main.js文件
  • 在 app.vue页面中直接使用 ( 使用时需要注意的是:要给包裹轮播组件的 div 设置宽高, 否则显示不出来 )


    image.png

    !!! 在这里呢, 一个大概的轮播已经成型, 下面我们可以看着页面来编写剩下的两个块指示器部分

5. 指示器的编写

  • 新建 Dot.vue 文件, 编写底部指示器





  • 新建 Driector.vue 文件, 编写左右两侧方向指示器





  • 到这里两块指示器已经编写完成, 具体用法, 直接参考上面 inde.vue 文件, 其实写到这里, 整个轮播组件也已经编写完成
    轮播组件效果截图
二、如何发布到 npm 上

1. 准备好需要发布的文件

  • 在最外层 package.json 中进行打包配置
    package.json
    "package": "vue-cli-service build --target lib ./src/libs/jscy-ui/index.js --dest carouselSlide --name carousel"
  • 执行 npm run package 进行打包, 生成 carouselSlide 目录
    image.png
  • 新建 package 目录
    • carouselSlide 目录中的 carousel.umd.min.js 复制到 package 目录下
  • carouselSlide 目录中的 .css 样式文件 复制到 package 目录下
  • 初始化package目录, npm init -y 生成 package.json 文件
  • 配置 package.json 文件(我这边只做了简单配置)
    image.png

2. 对 npm 进行操作

  • 首先进到 npm 首页 , 在进行登录, 如果刚注册的, 注意一定要进行邮箱激活
  • 使用 nrm ls 查看当前源是否是 npm 官方源, 不是则需要切回
    • 没有 nrm , 使用 npm i nrm -g 进行安装
    • 使用 nrm use npm 切回到 npm 官方源
      image.png
  • 在终端登录 npm
    • 执行 npm login

    • 输入账号密码邮箱进行登录
      image.png
    • 执行 npm publish 进行发布

      image.png

  • 到此时已经发布成功, 刷新 npm 就可以看到


    image.png
三、组件的使用
  • 这边具体的使用, 我就不过多赘述, 使用方法直接参考 npm上的文档
  • 在这边附上整个项目的源码地址
!!! 到这里, 这篇文章就结束啦, 有问题的地方, 希望大家能够指出。

你可能感兴趣的:(vue 封装 轮播组件 并发布到 npm 上)