Custom Vue component packaging, publishing to npm and using tutorials

This article will help: Package your own Vue components to npm for code hosting, and how to use your own components after normal release.

This article only talks about the most basic implementation. Other complex operations require you to be very familiar with the relevant knowledge of webpack, and the author will continue to learn.

Follow the steps written in the boss's article, if you are careful enough, you can basically get it in one step. Here are the steps to publish:

1. Use Vue's scaffolding to create a simple version of the Vue project my-project:

vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev

2. Write components:

Create a new myPlugin folder under src to store the components developed -> Create a folder for each component, which stores a vue component file and a configuration file -> Create an entry configuration file in the outermost layer under myPlugin -> Add a name attribute to each person's vue component file

3. Test components:

Test your components to use

4. Write configuration files

Put the following code in each component folder you just added: (where ldcPagination is the component name)

import ldcPagination from './';
 = Vue => (, ldcPagination);//.name is the name exposed in the vue file that was mentioned at the beginning, ldcPagination entire componentexport default ldcPagination;

Put the following code under myPlugin: (where ldcPagination is the component name, and multiple components are added directly in the components array and output at the end) (The imported public style files, etc. can be placed in this file)

import ldcPagination from './Pagination/';
const components = [
 ldcPagination
]
const install = function(Vue, opts = {}) {
 (component => {
  (, component);
 });
}
if (typeof window !== 'undefined' && ) {
 install();
}
export default {
 install,
 ldcPagination
}

5. Rewrite the configuration file

Change the input and output into the following code:

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = .NODE_ENV;
 = {
//entry: './src/',
//output: {
//  path: (__dirname, './dist'),
//  publicPath: '/dist/',
//  filename: ''
// },
  entry: NODE_ENV == 'development' ? './src/' : './src/myPlugin/',
  output: {
   path: (__dirname, './dist'),
   publicPath: '/dist/',//path   filename: '',//The name after packaging   library: 'ldc-ui', // The specified module name when you use require   libraryTarget: 'umd', // Specify the output format   umdNamedDefine: true // AMD modules during UMD construction will be named.  Otherwise, use anonymous define  },
...
}

6. Preparation before release

The private in rewrite is false, add it"main": "dist/", Other customizations -> Create a new .npmignore file ignores files that do not need to be uploaded, such as .* *.md *.yml build/ node_modules/ src/ test/

7. Publish

npm run build package -> Register npm account -> npm login login -> npm publish Publish

Problems may arise:

1. Login source error, npm config get registry can view the current login source, npm config set registry= can switch to the correct login source

2. Version number cannot be repeated

3. The image resource cannot be used after packaging, so do not use it in your own components.

How to use components:

1. npm i xxx -D

2. import XXX from 'xxx'

3. const { A, B } = XXX

4. Register components in Vue: { A, B }

Summarize

The above is the tutorial on packaging, publishing and using custom Vue components introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!