vue 組件庫(kù)發(fā)布

Component libraries are all the rage these days. They make it easy to maintain a consistent look and feel across an application.

如今，組件庫(kù)風(fēng)行一時(shí)。 它們使在整個(gè)應(yīng)用程序中保持一致的外觀和感覺變得容易。

I've used a variety of different libraries in my career so far, but using a library is very different than knowing exactly what goes into making one.

到目前為止，我在職業(yè)生涯中使用過(guò)各種不同的庫(kù)，但是使用庫(kù)與確切地了解制作一個(gè)庫(kù)的方式有很大不同。

I wanted a more in depth understanding of how a component library is built, and I want to show you how you can get a better understanding too.

我想對(duì)組件庫(kù)的構(gòu)建方式有更深入的了解，并且想向您展示如何更好地理解組件庫(kù)。

To create this component library, we're going to use the vue-sfc-rollup npm package. This package is a very useful utility when starting a component library.

要?jiǎng)?chuàng)建此組件庫(kù)，我們將使用vue-sfc-rollup npm軟件包。 啟動(dòng)組件庫(kù)時(shí)，此軟件包是一個(gè)非常有用的實(shí)用程序。

If you have an existing library that you want to use the utility with, refer to the documentation they provide.

如果您有要使用該實(shí)用程序的現(xiàn)有庫(kù)，請(qǐng)參考它們提供的文檔 。

This package creates a set of files for the project to start out. As their documentation explains, the files it creates includes the following (SFC stands for Single File Component):

該軟件包為項(xiàng)目創(chuàng)建了一組文件。 正如他們的文檔所解釋的那樣，它創(chuàng)建的文件包括以下內(nèi)容(SFC代表“單個(gè)文件組件”)：

• a minimal rollup config

  最小匯總配置

• a corresponding package.json file with build/dev scripts and dependencies
  帶有build / dev腳本和依賴項(xiàng)的相應(yīng)package.json文件
• a minimal babel.config.js and .browserslistrc file for transpiling
  最小的babel.config.js和.browserslistrc文件用于轉(zhuǎn)譯
• a wrapper used by rollup when packaging your SFC
  打包SFC時(shí)匯總使用的包裝器
• a sample SFC to kick-start development
  樣本SFC以啟動(dòng)開發(fā)
• a sample usage file which can be used to load/test your component/library during development
  一個(gè)樣本用法文件，可用于在開發(fā)過(guò)程中加載/測(cè)試您的組件/庫(kù)

The utility supports both Single File Components as well as a library of components. It is important to note this sentence from the documentation:

該實(shí)用程序支持“單個(gè)文件組件”以及組件庫(kù)。 請(qǐng)務(wù)必注意文檔中的這一句話：

In library mode, there is also an 'index' which declares the components exposed as part of your library.在庫(kù)模式下，還有一個(gè)“索引”，用于聲明作為庫(kù)的一部分公開的組件。

All this means is that there is some extra files generated in the setup process.

這意味著在安裝過(guò)程中還會(huì)生成一些額外的文件。

酷，讓我們建立圖書館 (Cool, let's build the library )

First you'll want to install the vue-sfc-rollup globally:

首先，您需要全局安裝vue-sfc-rollup ：

npm install -g vue-sfc-rollup

npm install -g vue-sfc-rollup

Once that is installed globally, from the command line, go into the directory where you want your library project to be located. Once you are in that folder, run the following command to initialize the project.

將其全局安裝后，從命令行進(jìn)入要在其中放置庫(kù)項(xiàng)目的目錄。 進(jìn)入該文件夾后，運(yùn)行以下命令來(lái)初始化項(xiàng)目。

sfc-init

sfc-init

Choose the following options within the prompts:

在提示中選擇以下選項(xiàng)：

• Is this a single component or a library? Library

  這是單個(gè)組件還是庫(kù)？ 圖書館

• What is the npm name of your library? (this will need to be unique on npm. I used brian-component-lib)

  您的圖書館的npm名稱是什么？ (這在npm上必須是唯一的。我使用brian-component-lib )

• Will this library be written in JavaScript or TypeScript? JavaScript (feel free to use TypeScript if you know what you're doing)

  該庫(kù)將用JavaScript或TypeScript編寫嗎？ JavaScript(如果您知道自己在做什么，則可以隨意使用TypeScript)

• Enter a location to save the library files: This is the folder name you want your library to have. It will default to the npm name you gave it above so you can just hit enter.

  輸入保存庫(kù)文件的位置：這是您希望庫(kù)具有的文件夾名稱。 它將默認(rèn)為您在上面提供的npm名稱，因此您只需按Enter鍵即可。

After the setup is complete, navigate to your folder and run an npm install.

設(shè)置完成后，導(dǎo)航至您的文件夾并運(yùn)行npm安裝。

cd path/to/my-component-or-libnpm install

Once that is done, you can open the folder up in your editor of choice.

完成后，您可以在選擇的編輯器中打開該文件夾。

As stated above, there is a sample Vue component built for us. You can find it inside of the /src/lib-components folder. To see what this component looks like, you can run npm run serve and navigate to http://localhost:8080/

如上所述，為我們構(gòu)建了一個(gè)示例Vue組件。 您可以在/src/lib-components文件夾中找到它。 要查看此組件的外觀，可以運(yùn)行npm run serve并導(dǎo)航至http：// localhost：8080 /

Now let's add our own custom component. Create a new Vue file inside of the lib-components folder. For this example, I am going to imitate the button used in the freeCodeCamp assignment sections, so I'll name it FccButton.vue

現(xiàn)在，讓我們添加自己的自定義組件。 在lib-components文件夾內(nèi)創(chuàng)建一個(gè)新的Vue文件。 對(duì)于此示例，我將模仿freeCodeCamp分配部分中使用的按鈕，因此將其命名為FccButton.vue

You can copy and paste this code into your file:

您可以將此代碼復(fù)制并粘貼到文件中：

You can see we have the basic template section at the top with the class we want it to have. It also uses the text that the user will pass in.

您可以看到我們的頂部有基本模板部分，以及我們想要的類。 它還使用用戶將傳遞的文本。

Inside the script tag we have the Component name and the props that the component will take in. In this case there is only one prop called text that has a default of "Run the Tests".

在腳本標(biāo)簽內(nèi)，我們具有組件名稱和該組件將要使用的屬性。在這種情況下，只有一個(gè)名為text屬性，其默認(rèn)值為“運(yùn)行測(cè)試”。

We also have some styling to give it the look we want it to have.

我們也有一些樣式來(lái)賦予它我們想要的外觀。

To see how the component looks, we'll need to add it to the index.js file located in the lib-components folder. Your index.js file should look like this:

要查看組件的外觀，我們需要將其添加到lib-components文件夾中的index.js文件中。 您的index.js文件應(yīng)如下所示：

You'll also need to import the component into the serve.vue file inside of the dev folder to look like this:

您還需要將組件導(dǎo)入dev文件夾內(nèi)的serve.vue文件，如下所示：

You might need to run npm run serve again to be able to see the button, but it should be visible when you navigate to http://localhost:8080/ in your browser.

您可能需要再次運(yùn)行npm run serve才能看到該按鈕，但是當(dāng)您在瀏覽器中導(dǎo)航到http：// localhost：8080 /時(shí)，該按鈕應(yīng)該可見。

So, we've built the component we wanted. You will follow this same process for any other component you want to build. Just make sure you are exporting them in the /lib-components/index.js file in order to make them available from the npm package we are about to publish.

因此，我們已經(jīng)構(gòu)建了所需的組件。 對(duì)于要構(gòu)建的任何其他組件，您將遵循相同的過(guò)程。 只需確保將其導(dǎo)出到/lib-components/index.js文件中，以使它們?cè)谖覀兗磳l(fā)布的npm包中可用即可。

發(fā)布到NPM (Publishing to NPM)

Now that we're ready to publish the library to NPM, we need to go through the build process for it to be packaged up and ready to go.

現(xiàn)在我們準(zhǔn)備將庫(kù)發(fā)布到NPM，我們需要完成構(gòu)建過(guò)程以將其打包并準(zhǔn)備就緒。

Before we run the build command, I recommend changing the version number in the package.json file to be 0.0.1 since this is the very first publish event for our library. We will want more than just one component in the library before we release the official 'first' version. You can read more about semantic versioning here.

在運(yùn)行build命令之前，我建議將package.json文件中的版本號(hào)更改為0.0.1因?yàn)檫@是我們庫(kù)的第一個(gè)發(fā)布事件。 在發(fā)布正式的“第一個(gè)”版本之前，我們將需要庫(kù)中不止一個(gè)組件。 您可以在此處閱讀有關(guān)語(yǔ)義版本控制的更多信息。

To do this, we run npm run build.

為此，我們運(yùn)行npm run build 。

As the documentation states:

如文檔所述：

Running the build script results in 3 compiled files in the dist directory, one for each of the main, module, and unpkg properties listed in your package.json file. With these files are generated, you're ready to go!

運(yùn)行構(gòu)建腳本會(huì)在dist目錄中生成3個(gè)編譯文件，每個(gè)package.json文件中列出的main ， module和unpkg屬性一個(gè)。 生成這些文件后，就可以開始了！

With this command run, we are ready to publish to NPM. Before we do that, make sure you have an account on NPM (which you can do here if you need to).

運(yùn)行此命令后，我們準(zhǔn)備發(fā)布到NPM。 在執(zhí)行此操作之前，請(qǐng)確保您已經(jīng)在NPM上擁有一個(gè)帳戶(如果需要，可以在此處進(jìn)行操作)。

Next we'll need to add your account to your terminal by running:

接下來(lái)，我們需要通過(guò)運(yùn)行以下命令將您的帳戶添加到您的終端：

npm adduser

npm adduser

了解package.json (Understanding package.json)

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

當(dāng)發(fā)布到npm時(shí)，我們使用package.json文件來(lái)控制發(fā)布哪些文件。 如果您查看在最初設(shè)置項(xiàng)目時(shí)創(chuàng)建的package.json文件，您將看到類似以下內(nèi)容：

"main": "dist/brian-component-lib.ssr.js", "browser": "dist/brian-component-lib.esm.js", "module": "dist/brian-component-lib.esm.js", "unpkg": "dist/brian-component-lib.min.js", "files": ["dist/*","src/**/*.vue" ],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

files下的部分告訴npm發(fā)布dist文件夾中的所有內(nèi)容以及src文件夾中的任何.vue文件。 您可以根據(jù)自己的需要進(jìn)行更新，但我們將保留本教程的內(nèi)容。

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

因?yàn)槲覀儧]有使用package.json文件進(jìn)行任何更改，所以我們準(zhǔn)備發(fā)布了。 為此，我們只需要運(yùn)行以下命令：

npm publish

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.

就是這樣！ 恭喜你！ 您現(xiàn)在已經(jīng)發(fā)布了Vue組件庫(kù)。 您可以轉(zhuǎn)到npmjs.com并在注冊(cè)表中找到它。

翻譯自: https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/

vue 組件庫(kù)發(fā)布

總結(jié)

以上是生活随笔為你收集整理的vue 组件库发布_如何创建和发布Vue组件库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。