preface

  • As one of the three front-end frameworks, vue.js is favored by developers for its rapid development characteristics. We usually integrate Router, Axios, Vuex, element-UI and other plugins with vue.js. Do you know how they work seamlessly with Vue.js? Next, we will manually develop a plug-in based on the Router plug-in’s seamless connection to vue.js and import it into the project as NPM. Are you ready? (PS: The following content, you need to have ES6 syntax foundation, vue. js plug-in, mixed, components, instructions related knowledge points to understand)

1. The principle of vue-Router integration with vue.js

  • We know that vue.js supports Router options when using vue-Cli2.0 scaffolding, as shown below:

When we type inYThe Router plug-in takes effect in the project. If we want to add a route, just modify itrouter/index.jsFile, as shown below (Add another route to the HelloWorld page) :There is no doubt that there is a lot going on inside the Router plugin when using vuE-CLI2.0 scaffolding. Today we will not go into the details of what is going on inside the Router pluginmain.jsContent:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'

    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app'.// This uses ES6 syntax,
      Router: router. If the key and value have the same name, you can omit the colon
      router,  	  
      components: { App },
      template: '<App/>'
    })
Copy the code

The router is added to the argument passed to the new Vue() constructor, and is integrated seamlessly with vue.js? We don’t know, but from the plugin section on the official website [click to view], there is also code like vue.use (Router) to integrate routing into vue.js. So, where is this code being executed? Starting with main.js, we can see this code:

    import router from './router'
Copy the code

So we locate torouterInside the index.js file is the contents of the route we defined:It is easy to see that this code is executed internally:

    Vue.use(Router)
Copy the code

Suddenly, it seems to be in line with the rules of the official website. So why is it in main.jsnew Vue()Passed in to the parameter constructorrouter? Here again involves vue.jsGlobal mix of knowledge [click to view] According to the global knowledge mix, it has disadvantages:This is mixed in whenever a Vue instance is created. In plain English, every time a Vue instance is created, the Created hook function shown above is called. From the code in the diagram above,console.log(myOption)This line of code executes conditionally, only if the myOption property in the $options object of the current vue instance is true. So can we make a rough guess:Is the router plugin integrated with vue.js based on plugin + mixin?Do an experiment for yourself:After removing the router from the Vue constructor in main.js, see if the project can still be routed to the HelloWorld page?

How to customize plug-ins

  • Check out the demo on the official website. To be honest, the vue.js website is really nice, almost all the functions of vue.js can be found in the official website demo(read here, do you realize the importance of the website?). . Now, let’s directly use the official website demo, to implement a plug-in, including the following functions:

    AvengerEug has a SayHi component that has a props called Content. The default value is avengerEug.

    Render: Hi {{content}} (where content is the default value or the value passed in)Copy the code

    2. Have an Avenger – Eug instruction that passes in a font style color style

    When red is passed, the font color in the label becomes redCopy the code

    3. Have a global popbox method

    When we execute this.$myMessage('Hello'), an alert box pops up with HelloCopy the code

  • Implementation steps

    • First: create a directory structure as shown below:

    • Second: fill the SRC /myPlugin/index.js file with the following contents:

      export default {
  install: (Vue) => {
    Vue.mixin({
      created: function () {
        AvengerEug is specified when the key exists in the vue constructor
        // Create global components, directives, and methods
        if (this.$options.avengerEug) {
          
          Vue.prototype.$myMessage = function (params) {
            window.alert(params)
          }

          Vue.component('SayHi', {
            template: '<h1> Hi {{ content }} </h1>',
            props: {
              content: {
                type: String,
                default: () = > {return 'avengerEug' }
              }
            },
            created() {
              console.log('Called SayHi component's Created hook function')
            }
          })

          Vue.directive('avenger-eug', {
            bind(el, binding, vnode, oldVnode) {
              if (binding.value) {
                el.style.color = binding.value
              }
            }
          })

        }
      }
    })
  }
}
Copy the code

    • Third: add the following code to main.js:

    • Fourth: verification:From the above, we usePlugin + blendTo integrate the plugins you wrote into the current project. Here’s a word:Why do we write components, directives, and methods that can be used in other components without registration? Remember from the official websiteThe plug-inChapter description? It requires that the first argument be a Vue object, and the vue.use code must be executed before the new Vue code. There is only one way to say that, when the new Vue construct is executed, all plug-ins are iterated internally and the install method of each plug-in is called as an argument, and this is the global Vue object.Some people may ask: I want to publish my plugin to NPM and use it for other projectsnpm install my-pluginCan add the above three functions to the project, then how to do? Let’s move on.

How do I rely on my own plug-ins across projects

  • In Chapter 2, we implemented the custom plug-in and integrated it into the current project. So how do you rely on your own plug-ins across projects? This is where you need to package your plug-ins into NPM. No hurry, let’s fix it!

  • The steps are as follows:

    1. Use vuecli2.0 scaffolding to build a simple version of vue.js project (to prevent plug-ins from relying on too many libraries)

    #Note that the project name must be unique, otherwise it will publish a 403 error and NPM will assume that you want to update someone else's plugin
#But it is not the same person, so it will report no permission
vue init webpack-simple my-plugin-avenger
Copy the code

    Ps: The name of the above projectmy-plugin-avengerKeep it in mind as we will need it later in NPM install and import.

    2. Write a custom plug-in. For convenience, I directly copy the code of creating the plug-in in Chapter 2, and the final content is as follows:

    3. Create a SRC /index.js file (to package the plug-in) as follows:

    4. Modify the webpack.config.js file

      // The corresponding modifications are as follows:
  module.exports = {
          entry: './src/index.js'.output: {
            // The module name that other libraries reference in the way require is configured
            library: 'my-plugin-avenger'.// libraryTarget generates code for different UMDs, which can be commonJS, AMD, or just imported through script tags
            libraryTarget: 'umd'.umdNamedDefine: true.// AMD modules in the UMD build process are named. Otherwise use anonymous define
            // The following content is omitted
          },
          // The following content is omitted
  }
Copy the code

    5. Modify the package.json file to specify the plug-in entry

    // Modify the following configuration. Because you need to publish, you need to change this field to false

    "private": false,

    // Add the following configuration. When using a third party library and using import MyPluginAvenger from ‘my-plugin-avenger’, the plugin’s package.json main entry is used to find the file

    "main": "dist/build.js",

    6. Run NPM install to import dependencies

    7. Run the NPM run build package

    8. Register your own account in NPM (if you already have an account, this step is ignored)

    9. Set the NPM config set NPM registry http://registry.npmjs.org/ command configuration source

    10. Run the NPM adduser command to bind the account and enter the following information:

    Username: your name Password: your password Email: yourmail

    11. Update the readme.md file in the project to describe what the plugin does and how to use it (this can be seen when looking for the plugin on the NPM website). I have not changed it for convenience.

    12. Run the NPM publish command to publish the NPM package

    13. Go to the NPM website to view the published plug-ins

    14. Cross-project dependencies, implemented in the project: NPM I my-plugin-Avenger

    15. Add the following code to your project’s main.js:

    import MyPluginAvenger from 'my-plugin-avenger'
Vue.use(MyPluginAvenger)

// Add avengerEug: true to the vue constructor

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'.avengerEug: true
})
Copy the code

    16. Use the components, directives, and global functions described in Chapter 2 on any page, and you’ll find success!

Four,

  • Some other errors occur during the NPM release, as follows:

    error why
    no_perms Private mode enable, only admin can publish this module The default image is unofficial and needs to be reset. Command: NPM config set registryregistry.npmjs.org
    npm publish failed put 500 unexpected status code 401 No login, you need to login: NPM login
    npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user? The package name is occupied and needs to be renamed. Before naming the package, check the NPM website to see if the package name is occupied
    You cannot publish over the previously published versions The version needs to be updated each time you release the package. You only need to modify the version field in the package.json file.
    NPM publishes regularly reports 403 You can confirm whether the registered account is verified in the mailbox, or confirm whether the project name published is unique

  • I am a slow walker, but I never walk backwards.