vue组件发布npm

左手的ㄟ右手 2022-05-14 11:39 293阅读 0赞

最近对开发Vue组件库的流程很好奇，网上步骤一搜也是一堆，总是少点漏点的步骤，就会导致整段垮掉，下边自己弄完整理了一下。

跟着步骤走：

一，创建一个vue项目，为了简洁方便，推荐使用**webpack-simple**构建一个项目

vue init webpack-simple my-project

二，就是按照提示，cd my-project\------->npm i\---------->npm run dev,到这里就简单构建了vue简洁版的脚手架

三，开始写自己的组件。

为了方便管理更多的组件，我们这里在**src**目录下面新建了一个**myPlugin**的目录，在这里面存放我们开发的组件，

我这里是写了两个组件，一个是**cropper**，一个是**Pagination**，**scss**用来存放样式，有封装的js方法就建个**js**目录，没有就没必要。然后再建一个你写的vue文件，和一个**index.js**（为什么每个组件会建立一个index.js，后边会提到，按步骤继续走）。

![70][]

四，编写你的组件，内容随意，主要注意export default出去的name值我们可以定义一下，后期可以作为组件的自定义name名。

![70 1][]

五，在app.vue里面引入观察组件是否能正确使用，下图是**app.vue**的详情代码。

<template>
      <div id="app">
        <pagination :totalPage=15 :totalSize=300 @onChange='tap'></pagination>
        <cropper></cropper>
      </div>
    </template>
    
    <script>
    import pagination from './myPlugin/pagination/index.vue'
    import cropper from './myPlugin/cropper/index.vue'
    export default {
      name: 'app',
      data () {
        return {
         
        }
      },
      methods:{
        tap(s){
          console.log(s,'出来了哈哈哈')
        }
      },
      components:{
        pagination,
        cropper
      }
    }
    </script>
    
    <style lang="scss">
    
    </style>

六，确定没问题了，就开始配置准备发布的东西，上面提到了为什么每个组件的文件夹都要建立一个index.js文件，在myPlugin单个封装的组件目录下的index.js中注册一次，（注意是单个组件的index.js）写入如下代码：

import ldcPagination from './index.vue';
    ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是开始说的vue文件暴露出来的name名，ldcPagination整个组件
    export default ldcPagination;

七，在**myPlugin根目录下的index.js**里面对组件进行配置，(注意是**myPlugin**根目录下的index.js，不是单个组件下的)这里简单列举了一个组件，多个可直接引入放到components数组里面并在暴露出去的时候写入。

分析下代码（再不懂得去看下vue构造器），

第一步引入了**ldcPagination**组件

第二步定义了一个数组，可用来存放引入的组件，其目的是为了下方的insatll函数循环注册了一次引入ldc-ui组件后，vue.use(ldc-ui)就可以使用全部的组件，无需单个引入，install别忘了default出去。

ps：如果你是单个的组件可以直接省略  中间所有步骤，直接在这里**import**引入，**export default**出去就行

import ldcPagination from './Pagination/index.js';
    const components = [
    	ldcPagination
    ]
    const install = function(Vue, opts = {}) {
    	components.forEach(component => {
    	    Vue.component(component.name, component);
        });
    }
    if (typeof window !== 'undefined' && window.Vue) {
      install(window.Vue);
    }
    
    export default {
    	install,
    	ldcPagination
    }

八，开始配置**webpack.config.js,**这里把之前的**entry（输入）**和**output（输出）**注释掉并进行替换，主要是考虑想观察组件是否配置成功了就引入到**app.vue**里面运行观察使用main.js的入口文件，没问题就注释掉，使用如下的配置引入的index.js入口文件路径并更换output进行打包，准备发布的工作

var path = require('path')
    var webpack = require('webpack')
    const NODE_ENV = process.env.NODE_ENV;
    module.exports = {
    //entry: './src/main.js',
    //output: {
    //	  path: path.resolve(__dirname, './dist'),
    //	  publicPath: '/dist/',
    //	  filename: 'build.js'
    //	},
    	 entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',
    	 output: {
    	 	path: path.resolve(__dirname, './dist'),
    	 	publicPath: '/dist/',//路径
    	 	filename: 'ldc-ui.js',//打包之后的名称
    	 	library: 'ldc-ui', // 指定的就是你使用require时的模块名
    	 	libraryTarget: 'umd', // 指定输出格式
    	 	umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
    	 },
    ...
    }

九，开始进行配置pack.json。

**version**是版本号，发布一次之后，再次发布的时候必须更改此字段，否则会报错

可自行对比个人的json文件，就多了俩行代码，分别是private和main

**private**是否为私人的，这里选择false

**main**代表打包之后的文件路径

"name": "ldc-ui",
      "description": "A Vue.js UI",
      "version": "1.0.2",
      "author": "",
      "license": "MIT",
      "private": false,
      "main": "dist/ldc-ui.js",
      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      },
      "dependencies": {
        "vue": "^2.5.11"
      },

在准备的最后最好是，建立一个**.npmignore**文件在里面屏蔽掉不需要上传的累赘，像我就屏蔽了如下内容（类似于git上传仓库中的.gitignore，直接建立文件重名名是不行的，最好用命令行去创建，不会建的百度一下）

.*
    *.md
    *.yml
    build/
    node_modules/
    src/
    test/

十，到这里，准备发布npm的东西。

1，去npm官网注册一个npm账号，按照步骤。

2，注册成功之后，在项目目录下的cmd命令行中输出

npm login                    登陆你的用户，密码

npm publish              进行发布

成功之后就可以去npm官网serach中直接搜索，

![70 2][]

![70 3][]

ps:在vue组件中有时本地测试没问题，发布会有一个错误**document is not defined**，不影响正常使用，这是runKit测试引入的问题，具体以下载引用使用为主。

[70]: /images/20220514/dc95add342dd496bb37e1ee986ad583a.png
[70 1]: /images/20220514/8acf4d280f7b489299ccd6b1b28a94e5.png
[70 2]: /images/20220514/f8893123cea34899858c239e066b061b.png
[70 3]: /images/20220514/0c70ed4d3c1c4720bc603f8824460996.png