教你一招轻松将自己Vue组件库上传至Npm

# 前言

平时在开发时难免会使用一些第三方的的插件或组件库，安装命令一般是npm install xxx。今天我们来实现一个自己的组件库，也可以通过命令来安装，接下来就是见证奇迹的时刻。

# 准备工作

1、创建空白文件夹

主要是为了干净，以一个空白的文件夹来写我们的东西

2、创建 package.json 文件

npm init -y

3、安装webpack相关

npm install webpack webpack-cli -D

4、安装 Vue-loader

npm install vue-loader

# 创建相关文件

1、创建src目录及index.js文件和components文件夹

到这一步：创建好后目录结构大致如上图~~~

2、编写组件

这时可以在components文件夹中创建我们自己所需上传的组件，并根据需要编写组件结构、参数以及方法等内容。

注意：我们在components文件夹创建组件时，一般会以组件名称命名创建一个同名文件夹，在此文件里再创建组件的.vue页面及index.js文件。

如上图：

• 我们在test.vue页面正常写我们的组件内容即可
• 文件index.js是为了单个导出或批量导出组件做准备

Test.vue文件里一定得有name属性，这个属性值是我们在引用组件时用到的组件名称。

# 创建 webpack.config.js 文件

const path = require('path')
module.exports = {
    devtool: "source-map",
    // 模式
    // mode: 'development', // 开发模式 生成普通 js 文件
    mode: 'production', // 生产模式 生成 .min.js 压缩文件
    // 入口
    entry: path.join(__dirname, './src/index.js'),
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: path.resolve(__dirname, 'dist'),
        // filename: 'test.js', // 生成的文件名 对应 开发模式
        filename: 'test.min.js', // 生成的文件名 对应 生产模式
        libraryTarget: 'umd', // 支持ems / commontjs / requirejs规范
        // libraryTarget: 'amd' // 支持 requirejs 规范
        umdNamedDefine: true
    },
    module: {
        rules: [{
            test: /.vue$/,
            loader: 'vue-loader'
        }]
    }
}

我们在编辑好组件内容，配置好webpack.config.js文件就可以测试打包了，这里要注意，我们在准备工作安装webpack时不能全局安装，以免影响现有项目的正常使用。所以我们在打包时运行npx webpack启动当前文件夹的webpack进行打包即可。

当然这里也可以不打包，直接把文件即将源码的形式把组件上传至Npm网站上

# 配置 package.json 文件

{
    "name": "My-conponents",
    "version": "1.0.0",
    "description": "自定义 h1 标签",
    "main": "src/index.js",
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
    },
    "keywords": ["测试组件","标签", "vue", "vue插件"],
    "author": "Mr.test",
    "license": "MIT",
    "devDependencies": {
        "vue-loader": "^14.2.4",
        "webpack": "^5.21.2",
        "webpack-cli": "^4.5.0"
    }
}

说明

这里的name: My-conponents就是我们安装/引入时使用的名字
安装时是:npm install My-conponents，
引入时是:import MyConponents from 'My-conponents'
注册是是:Vue.use(MyConponents)

简单讲My-conponents类似于element-ui用法一模一样。

当然也可以类似与element-ui一样单独引入一个组件，如下：

import { Test } from 'My-conponents'

Vue.use(Test)

原因主要是我们在组件同级的目录下的index.js文件中提供了单独注册的install方法，如下：

Test/index.js 文件

import Test from './test.vue';

Test.install = function(Vue) {
    Vue.component(Test.name, Test);
};

export default Test;

同时也在最外层的src/index.js中提供了批量注册的install方法，如下：

const packages = require('../package.json')
// 引入组件
import Test from './Test/test.js'
// 组件数组，以后丰富组件的话会有很多组件要放进去
const components = [Test, ... ];

// 创建 install 函数
const install = function(Vue, opts = {}) {
    components.forEach(component => {
        Vue.component(component.name, component);
    });
};

// 暴露 install 函数
export default {
    version: packages.version,
    install,
    Test
}

所以我们可以和element一样可全部引入也可按需引入，nice ~~~

# 编辑 README.md

## 安装
npm install My-conponents
 
## 引入
import MyConponents from 'My-conponents'
 
## 全局注册
Vue.use(MyConponents);

根据具体需要自行编写内容

# 上传至NPM

1、在npm官网注册账号：用户名 邮箱 密码

2、npm配置的中央仓库应是npm，如不是则运行以下命令

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

3、添加用户，配置

运行：npm addUser
依次添加：userName、password 和 Email

注意：只需添加一次即可，以后再上传时无需添加

4、上传至 npm

npm publish

注意：
    每次上传时`package.json`里的`version`不能与上次一样
    否则会提示上传失败

5、强制删除已上传的

npm unpublish [需要删除的包名] --force

注意：
    删除需谨慎，72 小时内可删除，否则`永久`不能删除
    删除后如需再次上传同名的包，需等 24 小时以后

上传成功后可在Npm官网查看我们上传的组件，可以在我们的项目中使用了

欢迎评论留言，noce ~~~