vue4.0封装插件，发布到npm上，npm install 形式引用

1、初始化一个项目 vue create ***

2、将项目中原来的src目录改为examples

　　新建packages空文件夹

3、因为没了src目录，需要修改vue.config.js（没有这个文件就新建一个）才能正常运行

　　直接上代码

　　

const path = require('path');
module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    // baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
    // publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    publicPath: './',
    //更改入口和出口文件名
    pages: {
        index: {
            entry: "examples/main.js",
            template: "public/index.html",
            filename: "index.html"
        },
    },
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages/')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的选项...
                return options
            })
    },
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'ecmoho-chart',
    /* 放置生成的静态资源 (mixin、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: false,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: false,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
    }
};

4、开始在packages中写自己要封装的插件

　　1）packages下新建文件夹chart　　--chart里面写自己想要的插件

　　2）packages下新建index.js文件

　　　　

import chart from "./chart/index";

// 存储组件列表
const components = [chart];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return;
    // 遍历注册全局组件
    components.forEach(component => {
        Vue.component(component.name, component)
    });
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    chart
};

　　3）chart文件夹下新建index.js文件

　　　　

import chart from "./src/chart";

// 为组件提供 install 安装方法，供按需引入
chart.install = function (Vue) {
    Vue.component(chart.name, chart)
};
// 默认导出组件
export default chart

　　4）packages下面可以建自己需要的文件夹，例如css、js等

　　完整packages文件夹文件目录如下

 5、开始验证了

　　1）examples下main.js中引用

 　　2）app.vue组件中调用

 　　3）npm run serve 可以试运行一下，基本上不会出现什么差错

6、发布到npm上

　　1）修改package.json文件，添加一条npm run lib指令在scripts中，修改发布到npm上的各种字段

　　直接上代码

　　

{
  "name": "ecmoho-chart",
  "version": "0.1.1",
  "private": false,
  "description": "ecmoho-chart 图形封装插件",
  "main": "lib/ecmoho-chart.umd.min.js",
  "keyword": "vue echarts ecmoho-chart",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name ecmoho-chart --dest lib packages/index.js"
  },
  "dependencies": {
    "echarts": "^4.5.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.1.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

　　2）添加.npmignore 文件，设置忽略发布文件

　　代码代码

　　

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

　　3）登录npm账号

　　　　如果配置了淘宝镜像，先设置回npm镜像：$ npm config set registry http://registry.npmjs.org

　　　　npm login　　根据提示输入账号、密码、邮箱就可以了，邮箱可以自己先登录一下

　　　　npm run lib 打包

　　　　npm publish 发布

 　　4）如果报403错误说明邮箱没有验证，到npm官网上验证一下邮箱就行了