[Xiaobai Basics] Rules and forms for introducing plug-ins and module packages into vue

Import js files or npm packages

Such as: jquery, moment.js, aixos, Highcharts, etc.
Note: Highcharts also has a plug-in version based on vue development, see below for specific usage methods

Import of custom js files

Just follow the ES6 module reference and usage syntax: Introduction and use of ES6 modules

Import third-party js files

Such as the introduction of third-party plug-ins in vue's main.js, such as axios, ehcharts, dayjs, etc.

citation rules

How does import from 'xxx' find the files in the node_modules directory

Based on the convention and implementation of the Node module system (the Webpack packaging tool is compatible with the node module system and abides by relevant rules), when the require/import module is not a core module, or a relative path such as "./", it will start from node_modules in the current folder Start searching for the directory, if you can’t find it, go to the node_modules in the upper level of the current folder to find it, until you find the global node_modules. Finally, a folder
with the same name is found . If there is package.json under the folder , the entry js file will be found according to the main field, and the relevant code will be executed.

(The suffix can be omitted, and the default priority is js > vue)

refer to this link

Take the introduction of jquery in Vue as an example

import jq from "jquery"

insert image description here

The method of uploading and importing is equivalent to

import jq from "./node_modules/jquery/dist/jquery.js"

Some references can be abbreviated, such as

import './style/reset.css';
import './style/element-variables.scss';
import './style/font_icons/iconfont.css';
import './style/style.scss';

Use of plug-ins

Take jquery as an example
Global import (in main.js):

//引入
import jq from "jquery"
//全局挂载
Vue.prototype.$ = jq;

Single-component introduction (must be introduced in each component before it can be used):

//引入
import $ from "jquery"

The way of introducing a single component is obviously troublesome, and it can be configured through webpack to solve this problem!
For example (for details, refer to: webpack configuration jq )

new webpack.ProvidePlugin({
    
    
            $:"jquery",
            "window.jQuery": "jquery",
            jQuery: "jquery",
            jquery: "jquery",
}),

A plugin developed based on vue

Such plugins need to be called using **vue.use()**, such as ElementUI, Highcharts

Plug-in usage rules

1. Use the plugin through the global method Vue.use(). It needs to be done before you call new Vue() to start the application:
(Note: When using Vue.use(), the method inside is automatically called)

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
    
    
  // ...组件选项
})

You can also pass in a custom configuration object: Vue.use(MyPlugin, { name: “gcshi” })

2. The Vue.js plugin should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional options object (this object parameter is MyPlugin of Vue.use(MyPlugin)) //If the
plugin is a function, it will be used as install method. When the install method is called, Vue will be passed in as a parameter.

MyPlugin.install = function (Vue, options) {
    
    

}

Scenarios used by plugins

MyPlugin.install = function (Vue, options) {
    
    
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    
    
    // 逻辑...
  }

  // 2. 添加全局资源()自定义指令
  Vue.directive('my-directive', {
    
    
    bind (el, binding, vnode, oldVnode) {
    
    
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    
    
    created: function () {
    
    
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    
    
    // 逻辑...
  }
}

Plugin usage example - custom directive

https://www.yuque.com/shiguangchao/cbygfe/yfvf8d

Components developed based on Vue

like:

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)