創建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