Vue3 自建組件上傳npm

一、想要擁有一個屬於自己的組件庫，首先我們來創建一個自己的vue項目

# 這里我先切換到taobao鏡像源
npm config set registry https://registry.npm.taobao.org

# 使用vue來創建vue3項目
vue create majorbio-ui

二、創建自己的組件，這里先創建一個swiper來測試

　　1. 清理代碼，刪掉里面無用的組件和logo

　　2.  asstes 下建立通用css，這里簡單處理

　　3. app.vue里導入base.css

　　4. compoents下面創建組件在App.vue里測試無誤

三、在src 下創建文件夾構建要發布的index.js

　　1. 創建好文件夾和index.js

　　2. 構建install方法暴露出去

import Swiper from '../components/swiper/Swiper';

const install = (vue) => {
    vue.component(Swiper.name, Swiper)
}

export default install

四、在package.json里面新建打包指令

# build-ui 命令名稱
# --target lib 指定要打包的路徑
# --dest   打包存放文件夾
# --name 打包文件名

"build-ui": "vue-cli-service build --target lib ./src/build-ui/index.js --dest marjorbio-ui --name index"

五、執行打包命令打包

# 執行上面創建的命令

npm run build-ui

　　此時能在項目里面看到打包好marjorbio-ui文件夾里面包含css和js

六、新建一個packages,把打包的 index.css 和 index.umd.js 復制進來 

　　這里我把index.umd.js 改名了，方便引用。

七、在packages下面實例化一個package.json

# 進入packages

cd packages

# 實例化package.json

npm init -y

{
  "name": "majorbio-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "zhi.yang",
  "license": "ISC"
}

# name 包名，這里一定要注意，如果名字被使用，后續會導致發布不成功
# version 版本
# main 入口文件

八、登錄 npm 官網 

　　1. 沒有賬號請注冊

　　2. 切換到npm官方源

# 1. 查看npm當前設置的源 
npm config get registry 或者 npm config list

# 2. 設置回原本的源，用來發布npm包
npm config set registry https://registry.npmjs.org

# 3. 設置為淘寶鏡像
npm config set registry https://registry.npm.taobao.org

　　3. 首次需要設置用戶名密碼綁定npm

# 添加綁定用戶，上面注冊的
npm adduser wish-yang

# 輸入密碼

# 郵件驗證

九、發布命令

# 切換到要發布的包

cd packages

# 執行發布命令

npm publish

十、查看npm上是否發布成功

十一、測試使用自己發布的包

　　1. 新建項目

　　2. 執行npm上面包的安裝命令

npm i majorbio-ui

　　3. 然后在main.js里導入組件

# 導入組件
import majorbioUI from 'majorbio-ui'
# 導入css
import 'majorbio-ui/css/index.css'

# 掛載組件
createApp(App).use(majorbioUI).mount('#app')

　　4、使用組件

<template>
  <div id="app">
    <mj-swiper :swiperList="banners"></mj-swiper>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      banners: [
        {
          image:
            "http://www.majorbio.com/storage/edu/9DhPowuxjH7yxKtrnj6Qwex50kHqH0BH-2022-03-23-09-00-06.png",
          link: "www.majorbio.com",
        },
        {
          image:
            "http://www.majorbio.com/storage/edu/aGkphjQg10hGjCG3OhpBHX97Ak9Qgnwx-2022-03-18-11-34-07.png",
          link: "www.majorbio.com",
        },
        {
          image:
            "http://www.majorbio.com/storage/edu/8x04MF10wxY3Q8B4cOi0cnXXDM0O6sT5-2022-03-23-09-10-42.png",
          link: "www.majorbio.com",
        },
      ],
    };
  },
};
</script>

　　5. npm run serve 運行項目。