2024年Web前端最全如何搭建和发布一个 Vue 组件库(2)，2024年最新附学习笔记+面试整理+进阶书籍

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• Is this a single component or a library?  Library

• What is the npm name of your library?  （名称在 npm 中必须是唯一的，这里我使用的是  brian-component-lib）

• Will this library be written in JavaScript or TypeScript?  JavaScript（可以放心地选择 TypeScript，只要你清楚自己的选择）

• Enter a location to save the library files:  （项目的文件夹名称，默认为之前步骤设置的 npm 名称，所以可以直接按 enter 取默认值。）

设置完成之后，进入项目目录并执行 npm install。

cd path/to/my-component-or-lib

npm install

完成之后，选择一个编辑器来打开项目目录。

如上所述，在  /src/lib-components  文件夹中可以看到，一个示例 Vue 组件已经为我们构建好了。要查看效果，可以运行  npm run serve  命令，然后在浏览器中访问  http://localhost:8080/。

开始添加我们的自定义组件。在这个示例中，我打算模拟 freeCodeCamp 的任务介绍部分的按钮，所以在  lib-components  文件夹中新建一个名为  FccButton.vue  的 Vue 文件。

这就是我们将要构建的按钮

可以直接将下面这段代码复制到你的文件中：

{{ text }}

src/lib-components/FccButton.vue

可以看到，在代码段的最上方部分是页面元素的模板：一个按钮，其 class 为 “btn-cta”，其文本内容为我们传递给它的变量 text 的值。

在 script 标签中，定义了组件名称及组件将要接收的属性（props），这个示例组件只接收一个默认值为 “Run the Tests” 的名为  text  的属性。

我们还定义了一些样式，以使这个按钮呈现出我们想要的外观。

为了查看这个组件的效果，需要将它添加到  lib-components  路径下的  index.js  文件中。index.js 文件内容如下：

/* eslint-disable import/prefer-default-export */

export { default as FccButton } from ‘./FccButton’;

src/lib-components/index.js

还需要在  dev  路径下的  serve.vue  文件中导入这个组件，代码如下：

/dev/serve.vue

再次执行  npm run serve  命令，在浏览器中访问  http://localhost:8080/  地址即可查看这个按钮组件的最终效果。

现在已经构建出我们想要的组件。之后可以参照这些步骤来构建自己的组件，切记要在  /lib-components/index.js  文件中将其导出，以确保在我们后续发布的 npm 包中这些组件是可用的。

发布到 NPM

=======

现在，组件库发布前的准备工作已经完成，我们需要执行构建过程来将其打包。

由于这是我们组件库的第一次发布，建议在执行 build 命令之前在  package.json  文件中将版本号设置为  0.0.1。我们将会在发布第一个正式版本之前加入更多组件。想要了解更多关于语义化版本的信息，查看这里。

执行  npm run build。

如文档所述：

执行 build 脚本将会在  dist  路径中生成 3 个编译后的文件，文件名和路径由 package.json 文件中的  main、module、unpkg  属性指定。这些文件生成之后，可以进行下一步。

命令执行完毕之后，我们已经准备好将组件库发布到 NPM 了。在此之前，确保你有一个 NPM 账号（没有的话，可以点击这里进行注册）。

接下来将你的 NPM 账户添加到终端（terminal）：

npm adduser

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-8FLApxwb-1715404599303)]

[外链图片转存中…(img-nj3pyIeS-1715404599303)]

[外链图片转存中…(img-s1n8fOqS-1715404599304)]

[外链图片转存中…(img-IjJEPsBd-1715404599305)]