Vue组件化发布到npm上

主要介绍如何自己创建组件，并将组件推到npm上，然后可以给其他人来使用你的组件，我这里使用Vue版本是Vue2的，脚手架是4的

首先新建一个Vue项目，然后将默认的一些文件都清空

 之后将src文件名修改为examples，这里面就是可以自己调试封装的组件，我们这里不对里面的内容进行修改，然后再新建一个packages的文件夹，内部结构如下

 其中css内的是封装组件的全局样式，dd-botton就是一个组件文件夹，内部的index.js就是封装组件的代码，我这个按钮的封装就是一个很简单的显示和点击，没有做其他的功能或样式。

index.vue

<template>
    <div class="dd-button">
        <button @click="$emit('click')">
            <span class="red">
                <slot />
            </span>
        </button>
    </div>
</template>

<script>
export default {
    name: "ddButton",
};
</script>

<style lang="less" scoped></style>

index.js        这是某个组件内的index.js，不要和packages内的混淆了

// 导入组件
import ddButton from "./src";
// 为组件提供install安装方法，供按需引入
ddButton.install = Vue => {
    Vue.component(ddButton.name, ddButton)
}
// 暴露组件
export default ddButton

 下面的才是packages根目录下的index.js

import ddButton from "./dd-botton";
import "./css/global.css";
const components = [ddButton];

const install = function (Vue) {
    // 判断是否安装，安装过就不继续往下执行
    if (install.installed) return (install.installed = true);
    // 遍历注册所有组件
    components.map((component) => Vue.component(component.name, component));
};

// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}
export { install, ddButton };

export default {
    // 导出的对象必须具有install，才能被Vue.use()方法安装
    install,
    // 具体组件列表
    ddButton,
};

之后在根目录下创建vue.config.vue的文件。

vue.config.js

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    // 修改 src 为 examples
    pages: {
        // lintOnSave: false,
        index: {
            entry: "examples/main.js",
            template: "public/index.html",
            filename: "index.html",
        },
    },
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: (config) => {
        config.resolve.alias
            .set("@", resolve("examples"))
            .set("~", resolve("packages"));
    },
};

最后来配置package.json的内容，在终端执行npm init命令，

其中第一个也就是name，必须要在npm上是没有的，可以先去npm上搜索一下，否则最后上传的时候会失败，我的package.json配置如下

package.json

{
  "name": "ddlazy-ui",
  "version": "1.0.2",
  "private": false,
  "author": "lazy",
  "license": "MIT",
  "description": "A Component Library for Vue.js.",
  "main": "lib/ddlazy-ui.umd.min",
  "files": [
    "lib",
    "src"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name ddlazy-ui --dest lib packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "less-loader": "^6.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "directories": {
    "example": "examples"
  }
 
}

其中main字段的值要指向lib目录下的压缩文件，lib文件夹不需要创建，最后执行npm run lib会自动生成，files文件则是将src和lib目录提交到npm上，version则是版本，每次对npm进行提交都要对version进行修改，例如1.0.2，接下来在终端执行npm run lib进行压缩代码，这个时候就会生成lib文件夹

 最后就是代码的提交了，首先要在npm官网创建一个账号，之后在终端执行npm login，输入用户名，密码，邮箱后在执行npm publish命令,我这里把版本改成了1.0.2了。

 上面就表示提交成功了，在npm官网，也可以搜索到刚刚你提交的包了，

这个时候任务已经完成了，我们来验证一下，继续创建一个新的vue项目，然后安装刚刚发布的包，我这里是执行npm i ddlazy-ui命令，你们要根据自己的包名进行安装，安装完成后，在main.js中全局导入，也可以按需导入，和element-ui是一样的，不过我这里样式是不能按需引入的，因为引入比较麻烦，所以就直接全局引入就行了

下面为测试

测试Vue项目的main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import 'ddlazy-ui/lib/ddlazy-ui.css';
import {ddButton} from 'ddlazy-ui'
Vue.use(ddButton)

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

不要忘记把css样式也引入，否则全局样式不起效果。

在App.vue中使用组件

App.vue

<template>
    <div class="page"><dd-button @click="add">1111</dd-button></div>
</template>
<script>
export default {
    methods: {
        add() {
            console.log("add-add");
        },
    },
};
</script>
<style lang="less" scoped>
.page {
  text-align: center;
    .dd-button {
        font-size: 100px;
    }
}
</style>

最后来看下效果