Create index. Js

Create index.js as an export file for all your components, importing and exporting them

For example, there is a Button component that needs to be exported

import Button from './src/Button.vue'
export {Button}
Copy the code

The above code can also be abbreviated as

export {default as Button} from './src/Button.vue'
Copy the code

Since Nodejs does not support import, we also need to use the packaging tool to package index.js. Of course, you can also use nodeJS require syntax directly.

Use a Parcel to package

Install the parcel

yarn global add parcel-bundler
Copy the code

or

npm install parcel-bundler -g
Copy the code

Use parcel to package index.js separately

parcel build index.js --no-minify --no-cache
Copy the code

–no-minify does not compress code. Vue’s
will be eaten directly after compression.

–no-cahce Clears the cache

Configuration package. Json

The following attributes need to be modified

  1. Name Specifies the package name after the package is published to NPM
  2. Version Indicates the version number of the current released package
  3. Main Specifies the path to the entry file
  4. Files package files
  5. The description described

Package. The json example

{
  "name": "xxx-ui"."version": "0.0.1"."main": "dist/index.js"."files": ["dist/*"]."description": "Vue UI Framework",}Copy the code

Register an NPM account

Enter the official website of NPMJS to register an account. Those who have already registered can skip it. Small this oneself live user name and password later want to take an examination of

Log in to the NPM account

You need to log in to the NPM account from the command line

Log in to

npm login
Copy the code

Enter the account number you wrote down in your notebook

Can also be logged off

npm logout
Copy the code

Switch the NPM source

The NPM source will need to be switched before publishing. Because you are going to publish the package to NPM and not taobao source or anything.

Fast source switching

Here’s a tool for quick source switching

Global installation

yarn global add nrm
Copy the code

or

npm install nrm -g
Copy the code

To view

nrm ls
Copy the code

You can see the source addresses currently in use, along with a list of optional addresses

Switch the source

nrm use npm
Copy the code

release

When everything is ready, run the following command

npm publish
Copy the code

Note That the version number in package.json needs to be changed with each release. The version number must be unique. Generally, release a “version”: “0.1.0” version of the available version after you download it and test it

Other links

Kangkang recently released a few simple components: Eagle UI, Lemon UI