preface

In the face of more and more open source component library, learn to release the library is the front end must be things, is to contribute the open source, and watched some of the former articles on the web, oneself also calculate publishing success, road short step, without that, come on, step by step the oneself release process record

Publishing environment

The vuE-CLI environment is used this time

vue create priject-name // Create a project
Copy the code

Setting up the library environment

1. Many tutorials suggest changing SRC to examples, but this has little to do with components and I personally don’t see the need to change it. Create a new Packages folder under the SRC folder, as shown in the following figure

2. You can then create components in it. I wrote the demo at hand, and the components folder is structured as elementUI.

Components are two boxes nested one pink and one red

// main.vue
<template>
  <div>
    <div class="box">
      <div class="slot">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "testBox".// Component global registration requires name,
};
</script>

<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  background: pink;
  .slot {
    width: 100px;
    height: 100px;
    background: red; }}</style>
Copy the code
//index,js

import testBox from './src/main.vue'

// Provide the install installation method for components to be imported on demand
testBox.install = (Vue) = > {
    Vue.component(testBox.name, testBox)
}

export default testBox

Copy the code

Install installComponents at the same level as packages to create an index.js file

import testBox from './packages/testBox'

const components = [
    testBox
]

The global registration method defines the install method, which accepts Vue as an argument. If the plug-in is registered with use, all components will be registered
const install = function (Vue) {
    // Determine whether to install it
    if (install.installed) return

    // Iterate over registered global components
    components.forEach(component= > {
        Vue.component(component.name, component)
    })

    // Check whether the file is imported directly
    if (typeof window! ='undefined' && window.Vue) {
        install(window.Vue)
    }
}

export default {
    // Exported objects must have install to be installed by vue.use ()
    install,
    // Specific components
    testBox
}
Copy the code

Use (XXX) to import vue. Use (XXX) from mian. Js.

Release NPM

Now comes the most important release of all, and it’s useless to run locally

Start by creating a new packaging command in package.json,

"scripts": { "lib": "Vue-cli-service build --target lib --name plugin_demo --dest lib SRC /installComponents.js",Copy the code
--target: build target. Default is application mode. Here change to lib to enable library mode. --dest: output directory, default dist. Here we change it to lib [entry]: the last parameter is the entry file, SRC/app.vue by default. Here we specify installComponents.js to compile the global registry componentCopy the code

Executing a compilation task

npm run lib
Copy the code

Configure the fields published to NPM in package.json files

Can have a look at this article, said very detailed juejin.cn/post/684490…

Name: package name, which is unique. Search for the name on the NPM website, or change the name if it exists. Version: indicates the version number. The version number must be changed each time you release data to NPM. The version number cannot be the same as the historical version number. Description: The description of the package, which will be displayed during a search on npmjs.com, to help the user filter during the search. Main: The entry file, which should point to the package file after our final compilation. Keyword: Separates the final word that you want the user to search for with Spaces. Author: the format is ${your name} ${email}, and can also be a Github address. Private: Indicates whether the address is privateCopy the code

Here’s my example:

Register/log in to NPM

Registration is skipped, but there is one thing that after registration, the first release of the package will prompt you to verify the email, this is very pit, I did not notice that the submission has not been successful… So keep an eye out

Login NPM loginCopy the code

After entering the account password email address

Release NPM publishCopy the code

After the successful release, your package will be available on NPM later. We can download it and try it out

npm i plugin_demo_components
Copy the code

Introduced in mian.js

import plug from 'plugin_demo_components'

Vue.use(plug)
Copy the code

Then test the component to see if it has no style hahaha. That’s right! Because I didn’t introduce CSS, so if you think about it a little bit if you use ElementUi to introduce CSS, ok, let’s introduce a wave

import 'plugin_demo_components/lib/plugin_demo.css'
Copy the code

Ok, great work done

That’s my summary of how to publish components to NPM. Hope you can also provide better opinions/suggestions!! (Beauty Town Building)