入门
npm create vite@latest我通过运行和命名我的项目来开始该项目，brian-component-lib以与我之前的帖子保持一致。当出现这些选项时，我还选择使用 TypeScript 和 Vue。
（VueJs教程：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教程：java567.com/search.html?sWord=vue&v=2306014）
