Initialize the project with vue init webpack-simple my-npm-custom

Note: Webpack-Simple is sufficient

Second, type NPM install, NPM run dev to get the project running

Three, start writing components

1, create a components folder in SRC and create a my-custom.vue file in this folder

My-custom. vue name can also be other, we write this component is placed in the file

2, create the index.js file in the same directory as webpack.config.js, my-npm-custom.vue is the exit to expose the main. vue file.

After the modification, the file directory is as follows, and the new content is marked in red

4. Modify the file content and configuration

1, the contents of the my-custom.vue file, write the functionality you need to implement

<template>
  <div>
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'my-npm-custom',
  data () {
    return {
      msg: 'This is data.'}},props: {
      propData: {
          type: String.default: 'Default value'}}}</script>

<style lang="scss">
</style>
Copy the code

2. Introduce it into app. vue

<template>
  <div>
    <myCustom :propData='initData'/>
  </div>
</template>

<script>
import myCustom from './components/my-custom'
export default {
    data(){
      return {
        initData: 'I'm the data of initData'}},components:{
      myCustom
    }
}
</script>

<style>

</style>
Copy the code

3. Add the contents of the index.js file

import myCustom from './src/components/my-custom'
// import _Vue from 'vue'
// This step checks whether window.vue exists because it refers directly to vue.min.js,
// It will bind the Vue to the Window so that we can directly reference the packaged JS to run properly.
if (typeof window! = ='undefined' && window.Vue) {
  window.Vue.component('my-custom', myCustom)
}
// Now you can use vue. use for global installation.
myCustom.install = function(Vue){
  if(! Vue) {window.Vue = Vue = _Vue
  }
  Vue.component(myCustom.name, myCustom)
}

export default myCustom

Copy the code

Modify the package.json file

5. Modify the webpack.config.js file

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // entry: './src/main.js',
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js'.output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'.filename: 'my-npm-custom.js'.library: 'my-npm-custom'.// Specify the module name when you use require
    libraryTarget: 'umd'.// libraryTarget will generate different UMD code, which can only be commonJS standard
    // Can also refer to amd standard, or can simply be introduced through script tags
    umdNamedDefine: true // AMD modules in the UMD build process are named. Otherwise use anonymous define
  },
Copy the code

6. Change the js reference path in index.html because we changed filename for output

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <title>my-npm-custom</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/my-npm-custom.js"></script>
  </body>
</html>

Copy the code

Five: the development of the piece is finished, package a look, NPM run build dist generated two files

Online said will generate two files, but do not know why I so much

Six: Publish to NPM