【Xiaobai Basics】プラグインやモジュールパッケージをvueに導入する際のルールとフォーム

js ファイルまたは npm パッケージをインポートする

例: jquery、moment.js、aixos、Highcharts など
注: Highcharts には、vue 開発に基づくプラグインバージョンもあります。具体的な使用方法については、以下を参照してください。

カスタム js ファイルのインポート

ES6 モジュールの参照と使用構文に従ってください: ES6 モジュールの紹介と使用

サードパーティの js ファイルをインポートする

axios、ehcharts、dayjs など、vue の main.js でのサードパーティプラグインの導入など。

引用ルール

「xxx」からインポートすると、 node_modules ディレクトリ内のファイルがどのように検索されますか

require/import モジュールがコアモジュールではない場合、または ". /"、現在のフォルダーのnode_modulesから開始します。ディレクトリを探し始めます。見つからない場合は、現在のフォルダーの上位層にある node_modules に移動して、グローバルな node_modules を見つけます。
最後に同名のフォルダが見つかり、そのフォルダの下にpackage.jsonがあれば、メインフィールドからエントリのjsファイルを探し、該当するコードを実行します。

(サフィックスは省略可能で、デフォルトの優先度は js > vue です)

このリンクを参照してください

例として、Vue での jquery の導入を取り上げます。

import jq from "jquery"

ここに画像の説明を挿入

アップロードおよびインポートの方法は、

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

一部の参照は、次のように省略できます。

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

プラグインの使用

グローバルインポートの例として jquery を取り上げます(main.js 内):

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

単一コンポーネントの導入 (使用する前に、各コンポーネントに導入する必要があります):

//引入
import $ from "jquery"

単一のコンポーネントを導入する方法は明らかに面倒であり、webpack を介して構成することでこの問題を解決できます! 例 (詳細については、 webpack 構成 jq
を参照)

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

vueをベースに開発されたプラグイン

このようなプラグインは、ElementUI、Highcharts などの **vue.use()** を使用して呼び出す必要があります。

プラグイン利用規約

1. グローバルメソッド Vue.use() を通じてプラグインを使用します。new Vue() を呼び出してアプリケーションを開始する前に、これを行う必要があります:
(注: Vue.use() を使用すると、内部のメソッドが自動的に呼び出されます)

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

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

カスタム構成オブジェクトを渡すこともできます: Vue.use(MyPlugin, { name: “gcshi” })

2. Vue.js プラグインは、インストールメソッドを公開する必要があります。このメソッドの最初のパラメーターは Vue コンストラクターで、2 番目のパラメーターはオプションのオプションオブジェクトです (このオブジェクトパラメーターは Vue.use(MyPlugin) の MyPlugin です) //プラグインが関数の場合、インストールメソッドとして使用され
ます. install メソッドが呼び出されると、Vue がパラメーターとして渡されます。

MyPlugin.install = function (Vue, options) {
    
    

}

プラグインが使用するシナリオ

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

プラグインの使用例 - カスタムディレクティブ

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

Vueをベースに開発されたコンポーネント

好き：

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