前言

本文就跟大家分享下如何使用CLI从零开始开发一个支持Vue2的库，并上传至npm，欢迎各位感兴趣的开发者阅读本文。

本文发布的插件地址：v-scrawl
本文插件的实现代码以及思路：v-scrawl实现方式
开发不易，如果可以给我点个star好吗

实现思路

本文使用的vue-cli3，因为vue3现在个人认为应用范围还不是很大，所以这里发布的是vue2版本的插件

创建项目
完善相关配置
添加库描述
发布至npm

实现流程

创建项目

本文就以我最近写的一个vue版本的涂鸦板为例子，具体的内容可以查看以下：

线上体验版本
本文发布的插件地址：v-scrawl
本文插件的实现代码以及思路：v-scrawl实现方式

完善相关配置

废话不多说马上开干

配置css内联

假如不配置这个的话，会导致后面在使用这个插件的时候，还需要再单独引入一次css文件，因为我们正常的打包的时候，是把js跟css分开打包的，所以这里就将所有的插件内容整合到一起，
在vue.config.js配置。

module.exports = {
    // 强制css内联
    css: { extract: false }
}

修改package.json配置

在这里，我们需要将我们的package.json文件稍微改动一下，首先是我们正常开发的时候，我们是把依赖放进了dependencies这个配置里面，就像下面这样

"dependencies": {
    "vue": "^2.6.10",
    "core-js": "^2.6.5",
  },

但是在我们开发插件的时候，这种写法就有可能导致用户在安装我们插件的时候安装多了一个vue，导致报错，所以我们需要修改一下，把它放进peerDependencies里面。

"peerDependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },

然后就是添加一条我们专门使用来生成依赖包的文件。


  "scripts": {
   ...
    "sc":"vue-cli-service build --target lib --name vScrawl --dest dist src/scrawl/index.js"
  },

vue-cli-service build --target lib --name vScrawl --dest dist src/scrawl/index.js

vScrawl是打包文件的文件名
src/scrawl/index.js是指定入口文件
然后在指定我们npm发布包的文件，在package.js，添加main

{
  "main": "dist/vScrawl.common.js",
}

那么到了这里，该修改的配置基本就修改完了

添加库描述

不要小看这一步，这一步很重要，先来看一下各个描述的意思

name 插件名称
version 版本号
description 插件简述
private 是否私有
main 库的入口文件位置(打包后的入口文件)
repository 仓库信息
keywords 关键词
author 库作者
license 库遵守的开源协议
bugs bug反馈地址
在这里面，private，keywords,repository，这几个特别重要。因为keywords关系到别人能不能找到你这个项目，其他两个就不用说了，你懂得，配置完成之后大概如下图，这里使用的配置是我发布的插件

{
  "name": "v-scrawl",
  "version": "1.0.7",
  "description": "v-scrawl是一个vue版本的涂鸦板，目前测试可以使用的有pc,h5。理论上在所有支持canvas的浏览器中都可以使用",
  "main": "dist/vScrawl.common.js",
  "keyword": "tuya vue scrawl palette",
  "author": "PJ",
  "license": "MIT",
  "private": false,
  "bugs": {
    "url": "https://github.com/956632862/v-scrawl/issues"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:956632862/v-scrawl.git"
  },
}

到这里，这个项目发布到npm的准备工作就全部做完了

发布到npm

发布包需要先去npm确认一下，没有相同名字的npm包才可以继续发布
这里需要先登陆，如果没有npm账号的话，先去注册一个npm

npm login

登陆完成之后，进行打包发布，这里要注意版本号不能跟npm的相同

// 打包
yarn sc
// 发布
npm publish

然后打开自己的npm，不出意外，在首页那里就可以看见你的包啦

发布一个Vue插件

前言