Initialize the project

Using vue init webpack-simple npm-practice, we don’t need a lot of configuration, webpack-simple is enough

Modifying a File Directory

Create a components folder in the SRC directory and create main. vue and index.js, the exit to expose the main. vue file

Modify file contents and configurations

  • Main.vue reads as follows:
<template>
  <div class="container">
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'npm-practice',
  data () {
    return{}},props: {
      propData: {
          type: String.default: 'I'm the default.'}}}</script>
<style lang="scss">
.container{
    text-align: center;
}
</style>
Copy the code
  • The contents of app.vue are as follows:
<template>
  <div id="app">
    <Main :propData='initData'/>
  </div>
</template>

<script>
import Main from './components/Main'
export default {
  name: 'app'.components:{
    Main
  },
  data(){
      return {
        initData: 'hello, how are you'}}}</script>
<style lang="scss">
</style>
Copy the code
  • Index.js contains the following contents:
import Main from './Main'
import _Vue from 'vue'

Main.install = Vue= > {
  if(! Vue) {window.Vue = Vue = _Vue
  }
  Vue.component(Main.name, Main)
}

export default Main;
Copy the code
  • Modify the package. The json

Package. json needs to change the private field (private is true and cannot be published to NPM, it needs to be set to false)

And add the main field, which is the require method to find the entry file through this configuration

  • Modify the webpack. Config. Js

Js is the NPM run dev entry, which is app.vue, used to debug/test the components we developed;

Index.js is the entry point to the NPM Run build, and packaging into production is simply an NPM-Practice component

Remove the source-map from the production environment

  • Change the js reference path of index.html, because we changed filename of output, so the name of the reference file will also change

  • Create a new file named.npmignore, which is a file and folder that does not need to be published to NPM, with the same rules as.gitignore
.*
*.md
*.yml
build/
node_modules/
src/
test/
Copy the code

Published to the NPM

  • Go to NPM and register an account at www.npmjs.com/
  • If set taobao mirror, need to restore
npm config set registry http://registry.npmjs.org 
Copy the code
  • In the root directory of the component, run NPM login. The system prompts you to enter your personal information and account password for login
  • Then perform NPM publish
  • Delete published NPM packages from NPM
npm unpublish --force // Forcibly delete, you can undo packages published within 24 hours, some packages published for a long time, this method no longer works.
npx force-unpublish package-name 'Cause description' // Delete the published package
Copy the code
  • You can go to the NPM website to check whether the package has been published successfully