入门

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）

标签：