This article will help you package your own Vue components into NPM for code hosting, and how to use your own components after normal distribution. This article covers only the most basic implementation, but other complex operations require a good knowledge of WebPack, which the authors will continue to learn.

The main steps

First attached to the big guy’s literature: blog.csdn.net/qq_40513881…

Step by step operation in accordance with the big guy article, enough careful words can basically step in place. Here’s a summary of the release steps:

Create a simple Vue project using Vue scaffolding

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

Write a component

  • Create a myPlugin folder under SRC to store all developed components
  • Create a folder for each component that holds a Vue component file and an index.js configuration file
  • Create an entry configuration file at the outermost layer under myPlugin
  • Add a name attribute to each person’s VUE component file

The test component

Test your components in app.vue to see if they work

Writing configuration files

Place the following code in the index.js folder for each component you just added :(where ldcPagination is the component name)

import ldcPagination from './index.vue';

ldcPagination.install = Vue= > Vue.component(ldcPagination.name, ldcPagination);//.name is the name of the vue file exposed at the beginning, ldcPagination of the entire component
export default ldcPagination;
Copy the code

Add the following code to myPlugin index.js :(where ldcPagination is the component name, add multiple components directly to the components array and output them at the end)

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

Rewrite the webpack.config.js configuration file

Replace the input and output with the following code:

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
//entry: './src/main.js',
//output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
// filename: 'build.js'
/ /},
     entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js'.output: {
         path: path.resolve(__dirname, './dist'),
         publicPath: '/dist/'./ / path
         filename: 'ldc-ui.js'.// The packaged name
         library: 'ldc-ui'.// Specify the module name when you use require
         libraryTarget: 'umd'.// Specify the output format
         umdNamedDefine: true // AMD modules in the UMD build process are named. Otherwise use anonymous define},... }Copy the code

Pre-release preparation

  • rewritepackage.jsonWhere private is false, join"main": "dist/ldc-ui.js", other customizations
  • Create. Npmignore file Ignore files that do not need to be uploaded.* *.md *.yml build/ node_modules/ src/ test/

release

  • npm run buildpackaging
  • Register an NPM account
  • npm loginThe login
  • npm publishrelease

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}

Possible problems

  1. Login error source, NPM config get registry can login to view the current source, NPM config set registry=http://registry.npmjs.org can switch to source the correct login

  2. The version number must be unique

  3. Image resources cannot be used when packaged, so do not use them in your own components