VUE write plug-in upload npm

Preface

This article is prepared not to write, because I wrote the uniapp plug-in to upload npm , and then added the handwritten VUE step bar component. This article mentioned that this step bar component will be uploaded to the npm warehouse later, and then I will use it The way of uploading uniapp plug-in tried to upload the VUE plug-in. The upload can be uploaded, but the plug-in cannot be installed when npm is installed in the VUE project. So I think again. Oh, it turns out that the uniapp plug-in upload and the VUE plug-in upload are still Not the same, so there is this article!

Go dry

1. Create an empty VUE project. When creating a VUE project
before, you should use the following command

vue init webpack you-project

But we are not a development project, but a plug-in, so there is no need to create a complete VUE environment, just use the following command to create

vue init webpack-simple you-project

The difference between the two


basically does not need to change any information, my plug-in in this step bar needs to use the sass dependency, so the environment can be installed here! The complete project structure is as follows!

2. Start the project,
first execute the following command

npm install

The installation here takes a long time, please do not use the cnpm Taobao mirror, because if you change to the Taobao mirror here, you need to replace it when you push the npm plugin later. After the environment dependency is installed, start the project

npm run dev

Successfully started!

3. Delete some unnecessary files.
This step can be done or not. The main thing is to let colleagues who use our plug-in not be so obsessed when they look at the plug-in dependency! Comparing the two pictures will clearly understand the meaning of this step!
This is a plug-in

that has not been deleted. This is a plug-in that has been deleted.

Don’t worry about this dist. We will talk about this later.

Delete the assets directory. This directory is for storing resources. If there are no static resources in the plug-in, you can kill it. , The others don’t need to be moved!

4. Writing plug-ins
If the amount of plug-in projects is relatively large, you can create separate directories. My plug-in is relatively simple, so I don’t want to build such a big shelf. The structure is as follows:

simple-step-bar.vue, this is the step bar component code, index.js is the file that exposes our components to the outside world. What needs to be noted here is install. Vue plugins must provide a public method install, which will be called when you use the plugin, that is, Vue.use(yourPlugin). In this way, all your components are injected globally into Vue.

5. Modify the configuration item webpack.config.js

entry: './src/plugin/index.js',//指定插件的对外暴露文件
  output: {
    
    
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//build后项目生成目录
    filename: 'simple-step-bar.js',//build后的文件名
    library: 'simple-step-bar', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

• library: specifies the name of the module when you use require
• libraryTarget: In order to support multiple usage scenarios, we need to choose a suitable packaging format. Common packaging formats are CMD, AMD, UMD. CMD can only be executed in the Node environment, AMD can only be executed on the browser side, and UMD supports two execution environments at the same time. Obviously, we should choose the UMD format.
• umdNamedDefine: Name the AMD module in the UMD construction process. Otherwise, use anonymous define.
  Sometimes we want to develop a library, such as lodash, underscore and other tool libraries. These libraries can be used in commonjs and amd or introduced in script.

At this time, we need to use library and libraryTarget, we only need to use ES6 to write the code, compile it into a universal UMD and hand it over to webpack

6. Compile the plugin

npm run build

7. Modify the package.json file to

release open source, so you need to change this field to false
"private": false,

This refers to the path
"main" it will retrieve when importing simple-step-bar : "dist/simple-step-bar.js",
注意这里如果不指定这个文件会导致引用组件是找不到这个组件

8. Write the README.md file.
If you want the user to guess the plug-in you wrote, you don't need to do this step. If you don't want to, then write in the README.md file in detail how to use the plug-in!

After the plug-in uploads npm, this file will guide the user after others enter the plug-in! As shown below

9. Log in to npm locally

npm login

If you don’t have an npm account, go to the official website to register one and you’re done on the npm official website . Pay attention to the problem of email verification, otherwise you can’t upload the plug-in. The uniapp plugin uploading npm is described in this article

10. Plugin push npm

npm publish

After the push is successful, the console is as above, and then the notification will be sent to the bound mailbox, no need to check!

Then the npm warehouse backend will change the number of plugins!

This is the simple-step-bar plug-in that we pushed. It will not be displayed immediately. It just changes the number of warehouse plug-ins. It will only be displayed after about 2 minutes!


Then upload the VUE plug-in to npm here and it's complete!

11.npm download plug-in test

npm i super-step-bar

After the installation is successful, there will be current plugins in node_modules

12. The project uses simple-step-bar plug-in

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

Use



test code in vue interface

<template>
  <div id="app">
    <div class="description-div">默认</div>
    <simple-step-bar></simple-step-bar>

    <div class="description-div">rem单位</div>
    <div>
      <button @click="less(1)">后退</button>
      <button @click="plus(1)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3' :unit='"rem"'
      :stepList="stepList1" :currentStep="currentStep1"
      :itemWidth='40' :lienWidth='0.1'
    ></simple-step-bar>

    <div class="description-div">px单位</div>
    <div>
      <button @click="less(2)">后退</button>
      <button @click="plus(2)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='720' :totalHeight='48' :unit='"px"'
       :stepList="stepList2" :currentStep="currentStep2"
       :itemWidth='240' :lienWidth='2'
    ></simple-step-bar>

    <div class="description-div">个性化样式</div>
    <div>
      <button @click="less(3)">后退</button>
      <button @click="plus(3)">前进</button>
    </div>
    <simple-step-bar
      :totalWidth='80' :totalHeight='3'
      :unit='"rem"' :stepBackground='"#FFFFFF"'
      :stepList="stepList3" :currentStep="currentStep3"
      :itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
      :processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
      :processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
    ></simple-step-bar>
  </div>
</template>

<script>
  export default {
    
    
    name: 'app',
    data() {
    
    
      return {
    
    
        stepList1:["步骤a","步骤b"],
        stepList2:["步骤1","步骤2","步骤3"],
        stepList3:["步骤一","步骤二","步骤三","步骤四"],
        currentStep1:1,
        currentStep2:2,
        currentStep3:3,
      }
    },
    methods:{
    
    
      plus(type){
    
    
        switch (type) {
    
    
          case 1:
            this.currentStep1++;
            break;
          case 2:
            this.currentStep2++;
            break;
          case 3:
            this.currentStep3++;
            break;
        }
      },
      less(type){
    
    
        switch (type) {
    
    
          case 1:
            this.currentStep1--;
            break;
          case 2:
            this.currentStep2--;
            break;
          case 3:
            this.currentStep3--;
            break;
        }
      }
    }
  }
</script>

<style lang="scss">
  #app {
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .description-div{
    
    
    margin-top: 2rem;
    height: 2rem;
  }
</style>

Regarding the detailed usage of the component , handwriting the VUE step bar component , bad, I only wanted to write a step bar function, but it was written as a plug-in, and now that the open source mount npm is available!

npm：simple-step-bar
gitee：simple-step-bar

other

The name of the plugin uploaded by npm cannot be the same as that of other people’s plugins. The version cannot be duplicated
, so you need to modify the version after each change.

npm version 1.1.0

Every time you upload a new version, you need to rebuild it before you can push it.

npm run build 

If you already have a plug-in in your warehouse, you can only use the deleted name 24 hours after you delete it!

npm unpublish guitest@1.0.1 //指定版本号

In addition, it is mainly due to security considerations. After the Azer NPM withdrawal event, npm announced a new version of the rules, as follows

• Packages whose version update is less than 24 hours are allowed to be removed;
• Please contact the npm maintainer to remove packages that are more than 24 hours old;
• If npm maintainers participate, npm will check if there are other packages that depend on the package, and if so, it will not be allowed to be removed;
• If all versions of a package are removed, npm will upload an empty placeholder package to prevent subsequent users from accidentally quoting a malicious replacement.