创建VueUI组件库并发布在npm

1.安装vue环境创建项目，注册npm账号

npm install -g @vue/cli

vue create my-component

https://www.npmjs.com/signup //npm账号注册地址
npm add user//或者命令行注册,按照提示依次输入

注：请注意你的npm是否设置了淘宝镜像，如有设置，更换过来

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

2.项目创建完成后新建组件

<!--项目src/components下创建life-cycle-components.vue-->

<template>
    <div></div>
</template>

<script> export default{ data(){ return{ } }, beforeCreate() { console.log("components beforeCreate") }, created() { console.log("components created") }, beforeMount() { console.log("components beforeMount") }, mounted() { console.log("components mounted") }, beforeUpdate() { console.log("components beforeUpdate") }, updated() { console.log("components updated") }, activated() { console.log("components activated") }, deactivated() { console.log("components deactivated") }, beforeDestroy() { console.log("components beforeDestroy") }, destroyed() { console.log("components destroyed") } } </script>

<style>
</style>

3.新建components/index.js

import Vue from "vue";
import LifeCycleComponents from "./life-cycle-components.vue";

const Components = {
  LifeCycleComponents
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

4.修改package.json

{
    "name": "@username/project-name",/*npm官网申请的用户名，project-name为项目名称*/
    "version": "0.1.0",/*版本号，每次更新都要修改，以免覆盖*/
    "author": "[e-mail]",
    "private": false,/*默认为true需要改为私有false*/
    "main": "./dist/components.common.js",/*添加main属性.指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件.*/
    "files": [
        "dist/*",
        "src/*",
        "public/*",
        "*.json",
        "*.js"
    ],
    "scripts": {
        "serve": "vue-cli-service serve",
        "build:dev": "vue-cli-service build --mode development",
        "build:sit": "vue-cli-service build --mode staging",
        "build:prod": "vue-cli-service build --mode production",
        "build-bundle": "vue-cli-service build --target lib --name project-name ./src/components/index.js",/*project-name为备注项目名称,根据组件路径直接打包项目中的组件，将此发布到npm上*/
        "lint": "vue-cli-service lint"
    }
}

5.命令行登录npm

npm login //登录，按照提示输入
npm whoami//检查是否登录成功

6.打包编译

npm run build-bundle

7.发布到npm

npm publish --access public

8.成功后就可以去头像→profile→package查看了

顺便附带上改回淘宝镜像的命令

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