Vue 中引用第三方js總結

時間 2021-02-20

標籤 javascript css html vue java node webpack web app less 欄目 JavaScript 简体版

原文原文鏈接

vue中引用第三方js總結

By:授客 QQ：1033553122javascript

實踐環境

win10css

Vue 2.9.6html

本文以引用jsmind爲例，講解怎麼在vue中引用第三方js類庫vue

基礎示例

一、把下載好的js類庫放在src/static目錄下java

二、在src/index.html入口文件中經過script引用須要使用的js（參見如下第8-10行代碼）node

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>測試管理平臺</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.png">
    <script src="./static/jsmind0.4.6/js/jsmind.js"></script>
    <script src="./static/jsmind0.4.6/js/jsmind.draggable.js"></script>
    <script src="./static/jsmind0.4.6/js/jsmind.screenshot.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

三、在webpack.base.config.js(webpack基礎配置文件，包含開發和生產環境的通用配置)中，增長一個externals配置（參見如下帶背景色，加粗，傾斜的內容）webpack

三、在webpack.base.config.js(webpack基礎配置文件，包含開發和生產環境的通用配置)中，增長一個externals配置（參見如下第17-19行代碼）
 
module.exports = {
  ...略
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  },  
  externals: {
    jsmind: "jsMind" // 屬性名稱：字符串 // 該字符串將用於檢索一個同該字符串同名的變量，本例中 將用jsMind來檢索一個全局的jsMind變量，即須要的類庫
  }
};

注意：之因此配置在externals中，是由於該配置項配置提供了「從輸出的 bundle 中排除依賴」的方法，即防止程序將 import 的包(package) 打包到 bundle 中。這裏，咱們不須要打包第三方庫，僅須要在運行時(runtime)從外部獲取這些擴展依賴(external dependencies)。web

四、引用app

經過import關鍵字根據實際須要進行全局、局部引用，以下，進行局部引用less

<template>
  <div class="jm-div">
    <div id="jsmindContainer"></div>
  </div>
</template>

<script>
import jsMind from "jsmind"  // from 類庫名稱 import 屬性名稱
</script>

五、導入css文件

通常狀況下，引用第三方js的同時，還須要引入對應的css文件，引入方式分如下兩種：

全局引入

在main.js文件中經過import引入，例如
```
import "../static/jsmind0.4.6/style/jsmind.css"
```

局部引入

非全局引入，好比在.vue等組件(例中組件存放路徑爲src/views/example.vue)

<style scoped>
@import "../../static/jsmind0.4.6/style/jsmind.css"; // 這個分號必定要寫，要不會報錯
</style>

參考連接

https://webpack.docschina.org/configuration/externals

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。