Vue3下使用CLI创建和发布npm库

前端

2023-11-08 05:19:19

前言

前几天写了一个Vue的自定义右键菜单的npm库，主要讲了插件的设计思路以及具体的实现过程，插件的开发流程没有细讲。本文就跟大家分享下如何使用CLI从零开始开发一个支持Vue3的库，并上传至npm，欢迎各位感兴趣的开发者阅读本文。

一、插件设计思路

根据Vue官方文档中有关插件的介绍，我们开发的插件可以分为以下三个部分：

插件的安装方法 ：插件一般通过Vue.use()方法进行安装，所以首先需要定义一个安装方法。
插件的功能实现 ：插件的功能实现主要体现在install方法中，install方法会接收Vue作为参数，可以在其中注册全局组件、指令、混入等。
插件的导出 ：一般来说，插件需要导出一个Vue的实例，以便在main.js中进行安装。

二、插件的具体实现

1. 创建项目

首先，使用Vue CLI创建新的项目，命令如下：

vue create vue3-npm-package

选择要使用的Vue版本为3.0.11，之后会自动创建项目。

2. 定义插件安装方法

在src/plugins文件夹下创建一个名为custom-right-menu.js的文件，该文件用于定义插件的安装方法，代码如下：

export default {
  install(Vue) {
    // 注册全局组件
    Vue.component('CustomRightMenu', CustomRightMenu)
  }
}

3. 实现插件的功能

在src/components文件夹下创建一个名为CustomRightMenu.vue的文件，该文件用于实现插件的功能，代码如下：

<template>
  <div class="custom-right-menu">
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CustomRightMenu'
}
</script>

<style>
.custom-right-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
}

.custom-right-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.custom-right-menu li {
  padding: 10px;
  cursor: pointer;
}

.custom-right-menu li:hover {
  background-color: #eeeeee;
}
</style>

4. 导出插件

在src/main.js文件中，导出插件，代码如下：

import Vue from 'vue'
import App from './App.vue'
import customRightMenu from './plugins/custom-right-menu'

Vue.use(customRightMenu)

new Vue({
  render: h => h(App)
}).$mount('#app')