如何创建和发布Vue组件库 |
您所在的位置:网站首页 › 如何使用vue构建项目 › 如何创建和发布Vue组件库 |
入门 npm create vite@latest我通过运行和命名我的项目来开始该项目,brian-component-lib以与我之前的帖子保持一致。当出现这些选项时,我还选择使用 TypeScript 和 Vue。 (VueJs教程:https://www.java567.com/search.html?sWord=vue&v=2306014) 组件我们正在构建的按钮组件 这是该组件的代码。请注意,它使用的是 TypeScript 和script setupVue 3 中可用的格式。 defineProps() {{ text }} .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; } 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,因为它会在构建过程中构建到自己的文件中。 import { FccButton } from 'brian-component-lib' import "brian-component-lib/style.css" 您现在应该在运行项目时看到该按钮。 如何发布到 NPM如果您尚未在终端内登录 NPM,则可以通过运行命令来完成npm adduser。 然后只需运行npm publish命令,包就会被推送并在 NPM 上可用。 (VueJs教程:https://www.java567.com/search.html?sWord=vue&v=2306014) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |