instructions

Part this paper refer to the following link: blog.fundebug.com/2018/06/08/…

steps

1. Install vuE-CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

Reference: cli.vuejs.org/zh/guide/in…

Create a project with VUE-CLI

Locate the parent directory and create the VUe-CLI project. Create or overwrite

vue create vue-cli
Copy the code

3. Adjust the project configuration

Vue-cli automatically installs a project after it is created. The following figure shows the installation directory of the project

① Set the packing range

Set the output directory tocomponentsfolder

Set up the packaged NPM package and output the subject content in the SRC/Components directory

Write the main file that needs to be output

Create component.vue under Components and parts under Components. Part1. vue and part2.vue are created in the parts folder and referenced by component.vue. The updated contents are as follows:

Any file in the Components folder can reference any file outside of Components without affecting packaging.

Create an output directory file

Create the index.js file in the SRC/Components directory

import component from './component.vue';

component.install = Vue => Vue.component(component.name, component);

export default component;
Copy the code

The above is output single component writing method, output multi – component writing method refer to the following code

(2) configurationpackage.jsonfile

🐽 name

Name indicates the name of the packaged project. The library will be referenced by other projects in the future, and the name determines the name of its folder under node_modules.

If you want to package a component from the NPM library, let’s say the name of the NPM library is @demo and the name of the package itself is Tester.

@demo/tester
Copy the code

After other items are referenced, node_modules looks like this:

Of course the prefix is nothing:

"name": "tester"
Copy the code

After other items are referenced, node_modules is just a Tester folder.

🐽 version

The version number, starting from 0.1.0, is updated before each publish.

description

Project description

keyword

An array of strings to facilitate others to search this module

licence

How to select a certificate for the corresponding open source protocol is quoted from ruan Yifeng’s article

repository

Address for code management

🐽 main

Project entry file address

"main": "./dist/component.common.js"
Copy the code

The component name is related to the name configured later in scripts

🐽 files

Common projects reference this library, but the actual files needed are in the dist folder that we packaged the output, but this output file is not smart to put in git management, you can add this file in package.json,

"files": [
    "dist"].Copy the code

It can achieve the goal of not storing the dist folder in Git code management, but also importing the required files for common projects.

🐽 scripts

Add packaging directives to scripts:

"build-bundle": "vue-cli-service build --target lib --name component ./src/components/index.js"
Copy the code

So each time you pack, you just do it

yarn build-bundle
Copy the code

(Remember the upgrade version number)

private

"private": false.Copy the code

If it’s an internal NPM package, you don’t need to change it

Rely on

The project includes dependencies, devDependencies, and peerDependencies to help reduce the package size

(3) configurationvue.config.jsfile

Add the CSS inline configuration

module.exports = {
    ...
    css: { extract: false}... }Copy the code

This packaged file is inline directly to the script file, without the landing project having to reference the CSS again for the style configuration to take effect

4, packaging,

Execute in the project directory

yarn build-bundle
Copy the code

package

If you want to package to an external NPM library publish: NPM publish –access public

When I actually published it, MY name was @pimkle/ Tester

NPM failed to log in and register. After typing NPM publish, Terminal will tell you the error message. Follow terminal’s prompts to operate step by step.

DEMO

The above mentioned points for attention, refer to the demo as follows: github.com/pimkle/npm-…

This demo project has not been referenced and tested in the actual project. If you have any questions, please leave a message or email me at [email protected]