1. Use Vue's scaffold to build a simple version of Vue project my project

vue init webpack-simple my-project

2, Just follow the prompts

cd my-project
npm i
npm run dev

3, Start writing your own components.

In order to facilitate the management of more components, we have created a new directory of myPlugin under the src directory to store our developed components,

I have written two components here, one is cropper and the other is Pagination. scss is used to store styles. If there are encapsulated JS methods, a JS directory will be created. If there is no need, it is unnecessary. Then create a vue file you wrote and an index JS (why does each component create an index.js? It will be mentioned later. Follow the steps).

4, Write your component with arbitrary content. Mainly pay attention to the name value of export default. We can define it. Later, it can be used as the custom name of the component.

5, On app Vue is introduced to observe whether the components can be used correctly. The following figure is app Detailed code of Vue.

<template>
  <div id="app">
    <pagination :totalPage=15 :totalSize=300 @onChange='tap'></pagination>
    <cropper></cropper>
  </div>
</template>
 
<script>
import pagination from './myPlugin/pagination/index.vue'
import cropper from './myPlugin/cropper/index.vue'
export default {
  name: 'app',
  data () {
    return {
     
    }
  },
  methods:{
    tap(s){
      console.log(s,'Come out ha ha ha')
    }
  },
  components:{
    pagination,
    cropper
  }
}
</script>
 
<style lang="scss">
 
</style>

6, After confirming that there is no problem, start configuring the things to be released. The above mentioned why an index should be established in the folder of each component JS file, in the index.js file under the single encapsulated component directory of myPlugin JS (note that it is the index.js of a single component). Write the following code:

import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//. name is the name exposed in the vue file at the beginning. ldcPagination is the whole component
export default ldcPagination;

7, Index. In the root directory of myPlugin JS to configure components. (note that index.js in the root directory of myPlugin is not under a single component). Here is a simple list of components. Multiple components can be directly introduced into the components array and written when exposed.

Analyze the code (no longer know how to look at the vue constructor),

The first step introduces the ldcPagination component

The second step defines an array that can be used to store the imported components. Its purpose is to register the imported LDC UI components in the insatll function loop below, and Vue Use (LDC UI) can use all components without introducing a single one. Don't forget to default in install.

ps: if you are a single component, you can directly omit all the intermediate steps, import it here and export it by default

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
}
 

8, Start configuring webpack config. JS, the previous entry (input) and output (output) are commented out and replaced here. The main consideration is to introduce them into app if you want to observe whether the component is successfully configured Run and observe in Vue and use main JS entry file, comment it out if there is no problem, and use the index introduced by the following configuration JS entry file path and change the output to package, and prepare for release

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/',//route
	 	filename: 'ldc-ui.js',//Packaged name
	 	library: 'ldc-ui', // Specifies the module name when you use require
	 	libraryTarget: 'umd', // Specify output format
	 	umdNamedDefine: true // The AMD module in the construction process of UMD will be named. Otherwise, use anonymous define
	 },
...
}

9, Start configuring pack json.

Version is the version number. After publishing once, this field must be changed when publishing again, otherwise an error will be reported

You can compare individual json files by yourself. There are two lines of code, private and main

Whether private is private or not, select false here

main represents the file path after packaging

  "name": "ldc-ui",
  "description": "A Vue.js UI",
  "version": "1.0.2",
  "author": "",
  "license": "MIT",
  "private": false,
  "main": "dist/ldc-ui.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },

At the end of the preparation, it is best to establish one npmignore files are shielded from unnecessary upload. For example, I have shielded the following contents (similar to. gitignore in git upload warehouse. It is impossible to directly create a file with the same name. It is best to create it with the command line instead of Baidu)

.*
*.md
*.yml
build/
node_modules/
src/
test/
 

10, Here, prepare to release npm.

1. Go to the official website of npm to register an npm account and follow the steps.

2. After successful registration, it is output in the cmd command line under the project directory

npm login log in your user, password

npm publish