入門

npm create vite@latest我通過運作和命名我的項目來開始該項目，brian-component-lib以與我之前的文章保持一緻。當出現這些選項時，我還選擇使用 TypeScript 和 Vue。

（VueJs教程：https://www.java567.com/search.html?sWord=vue&v=2306014）

元件

我們正在建構的按鈕元件

這是該元件的代碼。請注意，它使用的是 TypeScript 和script setupVue 3 中可用的格式。

<script setup lang="ts">
 
 defineProps<{ text: string }>()
 
 </script>
 
 <template>
   <button class="btn-cta">{{ text }}</button>
 </template>
 
 <style scoped>
 .btn-cta {
   background-color: #d0d0d5;
   border-width: 3px;
   border-color: #1b1b32;
   border-radius: 0;
   border-style: solid;
   color: #1b1b32;
   display: block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 18px;
   line-height: 1.42857143;
 }
 
 .btn-cta:active:hover,
 .btn-cta:focus,
 .btn-cta:hover {
   background-color: #1b1b32;
   border-width: 3px;
   border-color: #000;
   background-image: none;
   color: #f5f6f7;
 }
 </style>

src/元件/FccButton.vue

然後我們需要在庫中暴露這個元件。我們通過從index.ts檔案中導出它來做到這一點。

import FccButton from "./components/FccButton.vue";
 
 export { FccButton };

源代碼/index.ts

配置

準備好元件代碼後，我們需要確定 Vite 和檔案package.json配置正确。

Vite 在建構代碼時有很多選項。我們對“圖書館模式”感興趣。

import { defineConfig } from "vite";
 import { resolve } from "path";
 import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   build: {
     lib: {
       // src/indext.ts is where we have exported the component(s)
       entry: resolve(__dirname, "src/index.ts"),
       name: "BrianComponentLibrary",
       // the name of the output files when the build is run
       fileName: "brian-component-lib",
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: ["vue"],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
           vue: "Vue",
         },
       },
     },
   },
 });

速度.config.ts

這是package.json檔案。我們需要確定我們擁有指向我們建構的檔案所需的屬性。有關每個屬性的作用的更多資訊，您可以在 VS Code 中将滑鼠懸停在它們上面。

{
   "name": "brian-component-lib",
   "version": "1.0.0",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/brian-component-lib.umd.cjs",
   "module": "./dist/brian-component-lib.js",
   "exports": {
     ".": {
       "import": "./dist/brian-component-lib.js",
       "require": "./dist/brian-component-lib.umd.cjs"
     },
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vite build && vue-tsc --emitDeclarationOnly",
     "types": "vue-tsc ",
     "preview": "vite preview"
   },
   "dependencies": {
     "vue": "^3.2.47"
   },
   "devDependencies": {
     "@types/node": "^20.2.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",
     "vue-tsc": "^1.4.2"
   }
 }

包.json

為了vue-tsc --emitDeclarationOnly在建構時工作，我們需要将以下屬性添加到compilerOptionstsconfig.json 檔案的部分：

"outDir": "dist",
 "declaration": true,

我們還需要删除該noEmit: true屬性。這将使我們的類型在包中可用，是以使用 TypeScript 和 Vue 的項目不會因為沒有聲明類型而對我們大喊大叫。

我還添加了這一行以確定我的App.vue和main.ts檔案不包含在元件庫建構檔案中。

"exclude": ["src/App.vue", "src/main.ts"],

測試庫

我們現在可以運作npm run build然後測試我們的庫。為此，請打開一個 Vue 項目（您可以打開目前擁有的 Vue 3 項目，或建立一個空白項目）。

在您剛剛打開的項目的 package.json 檔案中，将以下内容添加到依賴項中：

"brian-component-lib": "file:../brian-component-library"

確定您輸入的檔案路徑指向元件庫所在的正确檔案夾。

運作npm install，你現在應該在你的node_modules.

将元件導入其中一個頁面以測試它是否正常工作。

注意：您還需要導入 CSS，因為它會在建構過程中建構到自己的檔案中。

<script setup lang="ts">
 import { FccButton } from 'brian-component-lib'
 import "brian-component-lib/style.css"
 </script>
 
 <template>
     <FccButton text="Run the Tests" />
 </template>

您現在應該在運作項目時看到該按鈕。

如何釋出到 NPM

如果您尚未在終端内登入 NPM，則可以通過運作指令來完成npm adduser。

然後隻需運作npm publish指令，包就會被推送并在 NPM 上可用。

（VueJs教程：https://www.java567.com/search.html?sWord=vue&v=2306014）

如何建立和釋出Vue元件庫

入門

元件

配置

測試庫

如何釋出到 NPM