vue-cli 3.x 开发插件并发布到 npm

1、npm基本步骤

1、如果不是用的是淘宝的镜像，要先修改

npm config set registry https://registry.npmjs.org

2、然后登录自己的npm账号，没有的先去官网注册一个

npm login
Username：
Password：
Email: (this IS public)  // 邮箱
npm notice Please check your email for a one-time password (OTP) // 输入你邮箱收到的8位验证码

3、 打包（如果要上传源码可忽略）
使用build的lib方式打包

 "lib": "vue-cli-service build --target lib --name element-textarea --dest lib src/index.js"

5、上传

npm publish

2、提交一个现有的组件要修改的配置

参考博客：
https://www.cnblogs.com/wisewrong/p/10186611.html

我的目录与上面博客不太一样：

index.js 文件

import ElementTextarea from './components/ElementTextarea'
// 创建 install 函数
// vue.use 会默认查找并调用 install 函数
ElementTextarea.install = function (Vue) {
  // 注意：第一个参数是组件名称，我们在页面引用时用到
  Vue.component(ElementTextarea.name, ElementTextarea)
}

// 暴露 install 函数
export default ElementTextarea;

pakage.json 文件

{
  "name": "element-textarea", // 组件的名称
  "version": "0.1.7",         // 版本号， 每次publish都要修改
  "private": false,
  "description": "组件式输入框， 像文字一样增删自定义组件",  // 说明
  "main": "lib/element-textarea.umd.min.js",   // 注意这个路径是打包完的
  "keywords": [
    "自定义输入框",
    "像文字一样增删自定义组件",
    "vue",
    "vue插件"
  ],      // 关键词
  "author": "dahe",
  "license": "MIT",  // 协议--公开
  // 下面就是vue-cli3创建项目基本的内容了
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name element-textarea --dest lib src/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

打包文件使用lib方式，

npm run lib

打包的结果就在lib文件夹中，但我们并不需要npm publish 所有的文件，所以需要配置.npmignore， 如果没有这个文件，npm publish时将按照gitignore中配置的来。

.npmignore

.DS_Store
node_modules
/dist
src
public
vue.config.js
babel.config.js
*.map
*.html
// 主要是上面忽略的文件和文件夹

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

README.md

这个文件是markdown格式的，里面的内容就是在npm网站上的介绍内容。

安装之后的目录

npm install --save element-textarea

3、同一份代码，直接提交源代码

更改pakage.json 中的name 和版本号

{
  "name": "element-textarea-origin", // 修改
  "version": "0.1.0",    // 修改
  "private": false,
  "description": "组件式输入框未打包的文件",// 修改
  "main": "src/index.js", // 由于是源文件，没有lib文件夹了， main也要修改
  "keywords": [
    "自定义输入框",
    "未打包",
    "vue",
    "vue插件"
  ],
  "author": "dahe",
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

.npmignore修改

.DS_Store
node_modules
lib

# local env files

修改README，引入方式改变，只需要引入组件

import ElementTextarea from 'element-textarea-origin'

重新npm publish， 又是一个新的库.

这个库npm install 之后，下载的文件就跟目录一样。