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官網上驗證一下郵箱就行了