[Conceptos básicos de Xiaobai] Reglas y formularios para introducir complementos y paquetes de módulos en vue

Importar archivos js o paquetes npm

Tales como: jquery, moment.js, aixos, Highcharts, etc.
Nota: Highcharts también tiene una versión de complemento basada en el desarrollo de vue, consulte a continuación los métodos de uso específicos

Importación de archivos js personalizados

Simplemente siga la referencia del módulo ES6 y la sintaxis de uso: Introducción y uso de los módulos ES6

Importar archivos js de terceros

Como la introducción de complementos de terceros en main.js de vue, como axios, ehcharts, dayjs, etc.

reglas de citación

¿Cómo la importación desde 'xxx' encuentra los archivos en el directorio node_modules?

Según la convención y la implementación del sistema de módulos de nodos (la herramienta de empaquetado de Webpack es compatible con el sistema de módulos de nodos y cumple con las reglas pertinentes), cuando el módulo de importación/requerimiento no es un módulo principal o una ruta relativa como ". /", comenzará desde node_modules en la carpeta actual Comience a buscar el directorio, si no puede encontrarlo, vaya a node_modules en la capa superior de la carpeta actual hasta que encuentre el node_modules global.
Finalmente, se encuentra una carpeta con el mismo nombre.Si hay un paquete.json debajo de la carpeta , el archivo de entrada js se encontrará de acuerdo con el campo principal y se ejecutará el código correspondiente.

(Se puede omitir el sufijo y la prioridad predeterminada es js > vue)

consulte este enlace

Tome la introducción de jquery en Vue como ejemplo

import jq from "jquery"

El método de carga e importación es equivalente a

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

Algunas referencias se pueden abreviar, como

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

uso de complementos

Tome jquery como ejemplo
Importación global (en main.js):

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

Introducción de un solo componente (debe introducirse en cada componente antes de que pueda usarse):

//引入
import $ from "jquery"

La forma de introducir un solo componente es obviamente problemática, ¡y se puede configurar a través de un paquete web para resolver este problema!
Por ejemplo (para más detalles, consulte: configuración de paquete web jq )

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

Un complemento desarrollado en base a vue

Dichos complementos deben llamarse usando **vue.use()**, como ElementUI, Highcharts

Reglas de uso de complementos

1. Use el complemento a través del método global Vue.use(). Debe hacerse antes de llamar a new Vue() para iniciar la aplicación:
(Nota: cuando se usa Vue.use(), el método interno se llama automáticamente)

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

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

También puede pasar un objeto de configuración personalizado: Vue.use(MyPlugin, { nombre: "gcshi" })

2. El complemento Vue.js debe exponer un método de instalación. El primer parámetro de este método es el constructor de Vue, y el segundo parámetro es un objeto de opciones opcionales (este parámetro de objeto es MyPlugin de Vue.use(MyPlugin)) //Si el complemento es una
función, se usará como método de instalación . Cuando se llama al método de instalación, Vue se pasará como un parámetro.

MyPlugin.install = function (Vue, options) {
    
    

}

Escenarios utilizados por complementos

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) {
    
    
    // 逻辑...
  }
}

Ejemplo de uso de complemento: directiva personalizada

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

Componentes desarrollados en base a Vue

como:

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