vue.js组件库
I was working on a project written with Nuxt.js (https://nuxtjs.org/). As you know Nuxt.js is created on top of the Vue.js (https://vuejs.org/), so they share the same component based approach. And based on that, we split the whole application into small and reusable components.
我正在使用Nuxt.js( https://nuxtjs.org/ )编写的项目。 如您所知，Nuxt.js是在Vue.js( https://vuejs.org/ )之上创建的，因此它们共享基于组件的相同方法。 在此基础上，我们将整个应用程序分为多个小组件和可重用组件。
We didn’t use any ready-to-use UI library/framework for our components (such as Quasar, Vuetify) so all of our components were written by our team, because our UI designers were very detailed and we need to have flexibility and customization in any level to create pixel perfect user interfaces based on their designs.
我们没有为组件使用任何现成的UI库/框架(例如Quasar，Vuetify)，所以我们所有的组件都是由我们的团队编写的，因为我们的UI设计师非常详细，我们需要具有灵活性和在任何级别进行定制，以根据其设计创建像素完美的用户界面。
We kept all of our components inside the components directory of our Nuxt.js app as it recommends.
我们建议将所有组件保留在Nuxt.js应用程序的components目录中。
After a while we had a demand to create a dashboard (admin panel) for our internal works and other activities which we couldn’t put them to the main website and it was better we kept them in a separate project. So we chose Vue.js again because it’s a stack of our main website (we tried to keep the same stack in our front-end projects as possible) and most importantly we needed lots of components on Vue.js which we already had on our main website and obviously we didn’t want to write them from the scratch (because it’s ridiculous!) and we definitely didn’t want to keep them in two separate places and make maintaining a disaster in the future. Imagine every single change and bug fix should be taken care of in two places!!! Impossible right! Or should I say stupid!
一段时间后，我们需要为内部工作和其他活动创建仪表板(管理面板)，而我们无法将它们放置到主网站上，最好将它们保存在单独的项目中。 因此，我们再次选择了Vue.js，因为它是我们主要网站的堆栈(我们试图在前端项目中尽可能保留相同的堆栈)，最重要的是我们在Vue.js上需要很多组件，而这些组件已经在我们的网站上拥有了主网站，显然我们不想从头开始编写它们(因为这太荒谬了！)，我们绝对不希望将它们放在两个单独的地方，以免将来造成灾难。 想象一下，每一个更改和错误修复都应该在两个地方进行！！！ 不可能吧！ 还是我应该说愚蠢！
Long story short, we must put all of our components in a separated project and use it in our main website and newly created dashboard as a dependency. Which seems a best practice to me so far and many people do this around the globe.
长话短说，我们必须将所有组件都放在一个单独的项目中，并在我们的主网站和新创建的仪表板中使用它作为依赖项。 到目前为止，对我而言，这似乎是一种最佳实践，全球许多人都在这样做。
So this new project should contain our components and these components should be used in other projects. So we have no pages here! There is no point to have some empty pages or some pages to just show a bunch of components and it’s a waste of energy and time (because we can use a storybook (https://storybook.js.org/) and I’m going to talk about it in another article). This led me to find out about vue library projects. These projects have no App.vue (as a starting point for a showable web application) and just contain a bunch of components, helpers, utils and other stuff to be shared and used in a couple of other projects. We can write proper tests for them and keep any related logic and functionality there. The upper layer (the other apps which use our projects) don’t need to know about our internal stuff and with a proper build they can use it like any other dependencies.
因此，此新项目应包含我们的组件，并且这些组件应在其他项目中使用。 因此，我们这里没有页面！ 没有必要有一些空白页或仅显示一些组件的页面，这是浪费精力和时间(因为我们可以使用故事书( https://storybook.js.org/ )，而我将在另一篇文章中讨论)。 这使我找到了有关vue库项目的信息。 这些项目没有App.vue(作为可显示的Web应用程序的起点)，仅包含一堆组件，助手，utils和其他要在其他几个项目中共享和使用的东西。 我们可以为它们编写适当的测试，并在其中保留任何相关的逻辑和功能。 上层(其他使用我们项目的应用程序)不需要了解我们的内部内容，并且具有适当的构建，他们可以像使用任何其他依赖项一样使用它。
Fortunately for us, vue-cli (https://cli.vuejs.org/) made it very easy by a few steps which I’m going to explain here. It uses the Webpack (https://webpack.js.org/) behind the scenes and provides lots of useful tools.
对我们来说幸运的是，通过以下几个步骤，vue-cli( https://cli.vuejs.org/ )使其变得非常容易。 它在后台使用了Webpack( https://webpack.js.org/ )，并提供了许多有用的工具。
Of Course there are other ways like using Webpack directly which is more flexible but we didn’t need that kind of flexibility and we were out of time.
当然，还有其他方法，例如直接使用Webpack更为灵活，但是我们不需要那种灵活性，而且我们没有时间了。
If you don’t know about Webpack and how to configure it, I strongly recommend to take a deep look at it first. If you just use things like vue-cli and don’t learn about what they’re doing behind the scenes, it might get you away from basic stuff and deep knowledge which will cause you many problems in the future and it’s a poison for any kind of engineer.
如果您不了解Webpack及其配置方法，强烈建议您先对其进行深入了解。 如果您仅使用vue-cli之类的东西，而又不了解它们在幕后所做的事情，那么它可能会让您远离基础知识和渊博的知识，这将在将来给您带来许多问题，并且对任何人来说都是有毒的那种工程师。
Now the steps:
现在的步骤：
Install vue-cli to use its tools and templates. By below command we’re going to install it globally on our machine: 安装vue-cli以使用其工具和模板。 通过下面的命令，我们将在其计算机上全局安装它：npm install -g @vue/cli
npm install -g @ vue / cli
2. Create a new project with it:
2.使用它创建一个新项目：
vue create [your-awesome-project]
vue创建[您的真棒项目]
3. Set your required configurations:
3.设置所需的配置：
I’m just choosing Babel (https://babeljs.io/) and nothing more to have a very light project.
我只是选择Babel( https://babeljs.io/ )，仅此而已就拥有一个非常轻便的项目。
4. Go to your root directory and open the project with your preferred editor or IDE. I use VsCode (https://code.visualstudio.com/).
4.转到您的根目录，然后使用首选的编辑器或IDE打开项目。 我使用VsCode( https://code.visualstudio.com/ )。
5. Run the project with just typing:
5.只需键入以下内容即可运行项目：
npm run serve
npm运行发球
As you can see it’s a simple template to run a simple vue project.
如您所见，这是运行简单vue项目的简单模板。
6. Remove App.vue in the src folder. You don’t need it! Also you can get rid of logo.png in the assets folder and HelloWord.vue in components folder.
6.删除src文件夹中的App.vue。 您不需要它！ 同样，您可以摆脱资产文件夹中的logo.png和组件文件夹中的HelloWord.vue。
7. Create your first component.
7.创建您的第一个组件。
I just created a simple component for this example.
我为此示例创建了一个简单的组件。
It’s a button which takes a string as a prop (text) and shows it in it’s Inner Html.
这是一个按钮，它将字符串作为道具(文本)并显示在内部HTML中。
8. Export this component to be used by others. For that:
8.导出该组件以供他人使用。 为了那个原因：
Add an index.js file into components folder with just below content:
将index.js文件添加到components文件夹中，其内容如下：
import Button from ‘./Button’
从'./Button'导入Button
export { Button }
导出{按钮}
It will export Button.vue by name to the upper layer.
它将按名称将Button.vue导出到上层。
Then replace the content of the main.js in src folder with these:
然后用以下内容替换src文件夹中main.js的内容：
export * from ‘./components’
从'./components'导出*
By that we’re saying to main.js to export everything in components directory as named export. You can use any other way you prefer.
通过这种方式，我们说的是main.js，将组件目录中的所有内容导出为名为export。 您可以使用其他任何喜欢的方式。
9. Replace your current build script in package.json with the line below:
9.用以下行将package.json中的当前构建脚本替换为：
“build”: “vue-cli-service build — target lib — name ui-components src/main.js”
“ build”：“ vue-cli-service构建-目标库-名称ui-components src / main.js”
By using — target we can specify the type of build we want (https://cli.vuejs.org/guide/build-targets.html). Also we can declare a name and an entry point to start the building process and Webpack, in our case main.js.
通过使用— target，我们可以指定所需的构建类型( https://cli.vuejs.org/guide/build-targets.html )。 同样，我们可以声明一个名称和一个入口点来启动构建过程和Webpack，在本例中为main.js。
When you run npm run build, this script is gonna build a folder (by default dist) inside your root directory by webpack and we told vue.js to make it as a library and not a website.
当您运行npm run build时，该脚本将通过webpack在根目录中构建一个文件夹(默认为dist)，我们告诉vue.js将其作为库而不是网站。
10. By running the build script, as you can see we have dist folder like this:
10.通过运行构建脚本，您可以看到我们有dist文件夹，如下所示：
Each file can be used in a different situation.
每个文件可以在不同的情况下使用。
A lib build outputs:
lib构建输出：
dist/[YOUR_LIBRARY].common.js: A CommonJS bundle for consuming via bundlers. dist / [YOUR_LIBRARY] .common.js：用于通过捆绑程序消费的CommonJS捆绑软件。 dist/[YOUR_LIBRARY].umd.js: A UMD bundle for consuming directly in browsers or with AMD loaders dist / [YOUR_LIBRARY] .umd.js：一个UMD软件包，可直接在浏览器或AMD加载程序中使用 dist/[YOUR_LIBRARY].umd.min.js: Minified version of the UMD build. dist / [YOUR_LIBRARY] .umd.min.js：UMD构建的缩小版本。 dist/[YOUR_LIBRARY].css: Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js) dist / [YOUR_LIBRARY] .css：提取CSS文件(可以通过在vue.config.js中设置css：{extract：false}来强制内联)11. So if we want to use this project as a dependency package, we should use [YOUR_LIBRARY].common.js as the primary entry point to our project. For that we just need to set the main property in package.json:
11.因此，如果我们想将此项目用作依赖项包，则应使用[YOUR_LIBRARY] .common.js作为项目的主要入口点。 为此，我们只需要在package.json中设置main属性：
“main”: “./dist/vue-lib-sample.common.js”
“ main”：“ ./ dist / vue-lib-sample.common.js”
Note: If you’re using git, make sure you removed the dist folder from .gitignore file so you can have it on your remote repo.
注意：如果使用的是git，请确保已从.gitignore文件中删除了dist文件夹，以便可以将其放在远程仓库中。
13. Now we can use it as a npm package or anyway we want. In this example I’m going to use it directly as a local dependency in another project.
13.现在，我们可以将其用作npm软件包，也可以使用它。 在此示例中，我将直接将其用作另一个项目中的本地依赖项。
In my upper layer project I’m just installing our project as dependency with npm:
在我的上层项目中，我只是通过npm将项目安装为依赖项：
npm add [PATH_OF_PROJECT]
npm添加[PATH_OF_PROJECT]
So my package.json will be updated like this:
所以我的package.json将像这样更新：
“dependencies”: {
“依赖关系”：{
…
…
“vue-lib-sample”: “file:[some_path]/vue-lib-sample”
“ vue-lib-sample”：“文件：[some_path] / vue-lib-sample”
}
}
And as you can see it’s added to our node_modules:
如您所见，它已添加到我们的node_modules中：
Note: In this approach (local dependency) you might face some linting issues. In my case I didn’t use any linting in both projects.
注意：在这种方法(本地依赖)中，您可能会遇到一些棉绒问题。 就我而言，在两个项目中我都没有使用任何棉绒。
Now we can use our Button component in any where we want!
现在，我们可以在任何需要的地方使用我们的Button组件！
Conclusion
结论
It’s a good practice to keep your components in a separated project, and isolate them from outside. They’re going to be reusable and you just need to change them in just one place. Also by adding a storybook you can make life easier for the whole team, including developers, designers and everybody else.
最好将组件放在单独的项目中，并将其与外界隔离。 它们将可重用，您只需要在一个地方进行更改即可。 另外，通过添加故事书，您可以使整个团队(包括开发人员，设计师和其他所有人)的生活更加轻松。
Vue.js usage of a vue library package Vue库包的Vue.js用法You can find relate repo here:
您可以在此处找到相关仓库：
https://github.com/aliafsah1988/vue-lib-sample
https://github.com/aliafsah1988/vue-lib-sample
翻译自: https://medium.com/@aliafsah1988/make-a-vue-js-library-to-keep-our-components-62fde3659ea6
vue.js组件库
